YouTube 视频在 WordPress 中播放完毕后的覆盖窗口答案

【问题标题】：Overlay window after YouTube video has finished playing in WordPressYouTube 视频在 WordPress 中播放完毕后的覆盖窗口
【发布时间】：2014-05-21 17:10:06
【问题描述】：

我的博客文章 (WordPress) 中有各种 YouTube 视频，可以像这样添加它们：<iframe width="700" height="525" src="http://www.youtube.com/embed/KA-OzK1RCdY?feature=oembed" frameborder="0" allowfullscreen></iframe>。

在视频停止播放后，有什么方法可以在 YouTube 视频区域上显示覆盖窗口...？？我想在此叠加层中添加一个用于订阅目的的表单。

提前感谢。

【问题讨论】：

标签： jquery wordpress youtube overlay

【解决方案1】：

您可以使用Youtube player API 来做到这一点：

Here's a fiddle to see that it works

这是我取自 another post 的一个例子：

<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) {          
            alert('done');
        }
    }

</script>

【讨论】：

当我希望将此添加到 WordPress 网站时，我不知道如何包含您的代码。我网站上的 YouTube 视频像许多其他元素一样是通过单独的插件添加的。我不知道如何更改插件以包含您提供的代码。另外，我正在寻找一个覆盖窗口，我可以在其中添加自己的内容，例如表单。这看起来像一个警报框。不知道如何将警报框转换为常规覆盖窗口。
如果您没有编程技能，您将无法实现您的目标。我建议你为覆盖窗口使用一个像“Easy Fancybox”（wordpress.org/plugins/easy-fancybox）这样的插件。对于代码，您可以将 HTML 代码直接粘贴到您的 Wordpress 帖子或页面中，因此在您的内容编辑器中切换为“HTML”，并通过我上面给您的代码（也许您需要调整它）。
我问了easy-fancy插件的开发者，是否可以实现，他们说不行。此外，再一次，我不是在寻找要在叠加层上播放的视频。我正在寻找在嵌入视频停止播放后出现的叠加层。
有可能，您必须在视频结束时创建一个弹出窗口。我不会给你写你需要的所有代码，但我可以告诉你，你需要替换该行：alert('done');