如何取消隐藏<div>当嵌入的YouTube视频完成播放时

时间:2017-08-11 13:12:35

标签: javascript wordpress youtube shortcode

Stack Overflow的成员亲切地创建了一个工作脚本,在Youtube视频完成时显示隐藏的div。在这里查看它非常酷。 :invalid。我如何将以下代码放在头部,以便我可以创建一个在WordPress中引用此JavaScript的简短代码?目前,它的设置在页面正文中运行。 WordPress不喜欢这样工作。

最终游戏是查看嵌入式YouTube视频,然后视频完成后会显示隐藏的div。我不相信我正确地接近这一点。如果您认为有更好的方法,我会向您表示赞同。

以下是代码

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            $('html, body').animate({
                scrollTop: $("#elementtoScrollToID").offset().top
            }, 2000);
        }
    }

</script>

<div id='elementtoScrollToID' class='my_div'> Hello! </div>

0 个答案:

没有答案