javascript - 嵌入的Youtube API突然停止运行

我使用NationBuilder创建的网站已经使用YouTube的IFrame API已有一个多月了。我需要它，因为我需要它的onPlayerStateChange来隐藏和显示放置在视频本身上方的某些元素。

突然，它停止了工作。我进行了一些研究，发现YouTube本月将转向其Data API的版本3，因此我认为这可能是问题所在。不知道

这是网站本身，视频是顶部的大视频，上面有两个元素:http://www.beyondbars.org/

(注意:该网站上的视频现在可以正常运行，因为我只是将常规iframe嵌入其中-您可以看到，一旦启动，它上面的两个元素就不会像我希望的那样隐藏起来)

我也做了在线研究和关于stackoverflow的研究，但是似乎没有其他人遇到这个问题。

我什至可以逐字复制并粘贴YouTube放在其教程网站上的示例脚本https://developers.google.com/youtube/iframe_api_reference#Requirements，但仍然无法正常工作。有趣的是，在这种情况下，我听到了视频中的声音，只是看不到实际的视频本身。

在生成的iFrame中，现在显示的是:

<div id="player-unavailable" class="ytp-error hid">
<div id="unavailable-submessage" class="ytp-error-content"></div>
</div>

在控制台中，我已经开始收到此消息，但是不确定是否与YouTube问题有关:



这是我实际需要的代码，之前已经可以使用:

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

<script>
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '{{ youtubeid }}',
          playerVars: { 'wmode': 'opaque', 'controls': 0, 'showinfo': 0 },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // when video starts, hide the headline wrap
    function onPlayerStateChange(event) {
        if(event.data === 1) {
            $('.headline-wrap').fadeOut('slow');
        }

        if(event.data === 0) {
            $('.headline-wrap').fadeIn('slow');
        }
    }

</script>

有人有想法吗？这是我做错了吗？还是在YouTube的末端？

谢谢!

最佳答案

我遇到了同样的问题，但是我将其隔离到Safari(OSX和iOS)中。还影响了Andriod浏览器。它适用于Chrome和Firefox。