时间戳

首页 > 解决方案 > YouTube API 未在 Wordpress 网站中显示任何内容

wordpress - YouTube API 未在 Wordpress 网站中显示任何内容

问题描述

我试图使最简单的 youtube 播放器 API 成为可能，基本上是他们的一个示例的精确副本，但它没有做任何事情。我按 F12 查找错误，就好像脚本甚至不在我正在查看的页面上。我不明白。

我的计划是让这个嵌入式 API 播放器像他们的示例一样工作，然后将其更改为播放列表，然后添加我们频道的其余播放列表和预告片。

我是编码新手。我知道一点 HTML 和 CSS，我大概知道 0.005% 的 Jquery。在起草您的回复时，请考虑您的听众。任何帮助是极大的赞赏。

我搜索并发现没有其他人有问题，根本没有任何显示。我发现浏览器需要支持“HTML5 postmessage”，我不知道 chrome 是否支持，虽然我无法想象谷歌不是说大多数现代浏览器都支持它。我们的页面在 wordpress 中使用 Divi 主题。我使用了一个代码块来插入这个 div 和脚本。我还尝试添加了 html 标签（打开和关闭），尽管我认为当您在 divi 中使用代码块时它们已经到位。

页面位置（当前直播）：https ://www.roguefab.com/videos2/

大多数代码的来源在这里：https ://developers.google.com/youtube/iframe_api_reference

我正在使用 Chrome 80.0.3987.132

现代 PC，赢得 10 Pro x64，它的正版副本

使用的代码：

    <div id="ytplayer"></div>

<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // 3. This function creates an <iframe> (and YouTube player) after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '8ISobLZ2RUw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

标签： wordpressyoutube-api

解决方案

看起来您没有在脚本中输入正确的 ID。

function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: '8ISobLZ2RUw',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

推荐阅读