javascript - 如何在嵌入的 YouTube 视频播放完毕后取消隐藏

Question

一位 Stack Overflow 成员好心地创建了一个工作脚本，当 Youtube 视频完成时，该脚本会显示隐藏的 div。在这里检查一下真是太酷了。 here 。我如何获取以下代码并将其放在头部，以便我可以创建一个在 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>

Answer 1

您可以通过下载一些插件来应用您的javascript功能。看到这个页面 https://www.ostraining.com/blog/wordpress/custom-js/