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

Question

一个多月以来，我一直在使用 YouTube 的 IFrame API 制作一个我用 NationBuilder 制作的网站。我需要它，因为我需要它的 onPlayerStateChange 来隐藏和显示我放置在视频本身之上的一些元素。

突然，它停止工作了。我做了一些研究，发现 YouTube 本月将迁移到其数据 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 问题有关:

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. ping?client_id=126739610711965&domain=www.beyondbars.org&origin=1&redirect_uri=http%3A%2F%2Fstatic.…:1

这是我实际需要的代码，之前可以正常工作:

<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 的尽头？

谢谢!

Answer 1

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