YouTube IFrame API - 从 data-video-id 设置视频 ID答案

【问题标题】：YouTube IFrame API - Set Video ID from data-video-idYouTube IFrame API - 从 data-video-id 设置视频 ID
【发布时间】：2018-01-12 20:44:43
【问题描述】：

有人点击我网站上的按钮后，我正在加载 YouTube 的 IFrame API。它在模态窗口中加载。在这个按钮上，我还在“data-video-id”属性中有视频 ID。有没有办法将视频 ID 动态加载到 YouTube API 中，而不是像下面这样在 API 代码中静态声明视频 ID？

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        height: '1920',
        width: '1080',
videoId: 'GfCPFk8lyhM', <---(how do I make this dynamic?)
        playerVars: {
           modestbranding: 1,
           rel: 0,
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

谢谢，布赖恩

【问题讨论】：

标签： javascript iframe youtube youtube-api

【解决方案1】：

您需要使用“loadVideoById”函数。
iFrame api 具有您需要的所有功能。

HERE 是您的链接。

这是您应该使用的。

【讨论】：

如果 YouTube 脚本在单击按钮后才加载，这会起作用吗？

【解决方案2】：

更新的答案 2021

尝试以下动态设置 youtube 播放器的视频 ID。通过此 api 自动播放 youtube 视频似乎存在问题，但希望这会有所帮助。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>.buttons { margin-bottom: 10px; }</style>
  </head>
  <body>
    <pre id="debug"></pre>
    <div class="buttons">
      <button data-play-youtube-video="GfCPFk8lyhM">
        Play Video 1
      </button>
      <button data-play-youtube-video="LXb3EKWsInQ">
        Play Video 2
      </button>
      <button id="destroy-youtube-player">
        Destroy Player
      </button>
    </div>
    <div id="player"></div>
    <script>
      (function () {
        var tag = document.createElement("script");

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

        var player;
        var videoId;

        // Creates youtube video player and assigns it into scope
        // so that we can interact with player outside of this function
        function playVideo() {
          player = new YT.Player("player", {
            height: "400",
            width: "320",
            videoId: videoId,
            playerVars: {
              modestbranding: 1,
              rel: 0
            },
            events: {
              onReady: function (event) {
                event.target.playVideo();
              }
            }
          });
        }

        // grab all buttons with the play youtube video data attribute
        var playYoutubeVideoButtons = document.querySelectorAll(
          "[data-play-youtube-video]"
        );

        // attach an event to each button found in the document
        for (var i = 0; i < playYoutubeVideoButtons.length; i++) {
          playYoutubeVideoButtons[i].addEventListener("click", function () {

            // if previous player was initialised, we destroy it
            if (player) {
              player.destroy();
            }

            // set the video id in scope to the video id located on the button
            videoId = this.dataset.playYoutubeVideo;

            // play the video
            playVideo();

            // update debug text
            document.getElementById("debug").innerHTML =
              "Youtube video: " + videoId + " has started playing.";
          });
        }

        // Below is a just hook an event to a button that destroys the youtube player when clicked
        var destroyYoutubePlayer = document.getElementById(
          "destroy-youtube-player"
        );

        destroyYoutubePlayer.addEventListener("click", function () {
          if (player) {
            document.getElementById("debug").innerHTML =
              "Youtube player has been destroyed.";
            return player.destroy();
          }

          document.getElementById("debug").innerHTML = "Youtube player has not been initialised.";
        });
      })();
    </script>
  </body>
</html>

2017 年旧答案

像这样将它作为参数输入到函数中。我没有使用过 API，但是这里有一个快速的方法来让视频 id 动态化。

var player;

function onYouTubeIframeAPIReady(videoId) {
    player = new YT.Player('video-placeholder', {
        height: '1920',
        width: '1080',
        videoId: videoId,
        playerVars: {
           modestbranding: 1,
           rel: 0,
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

document.getElementById('btn-video').addEventListener('click', function() {
  var videoId = this.dataset.videoId;
  onYouTubeIframeAPIReady(videoId);
  document.getElementById('debug').innerHTML = videoID + ' has been submitted';
});

<button id="btn-video" data-video-id="GfCPFk8lyhM">Play</button>
<span id="debug"></span>

【讨论】：

它似乎不起作用。我正在换出“值（）；”对于“数据视频 ID（）；”因为那是我的视频 ID 在按钮上的位置。我在该行收到“视频未定义”。
你需要把它换成document.getElementById('ipt-video').dataset.videoId，见更新的例子。
在单击按钮之前，我不会加载 YouTube API 脚本。是否仍然可以使这项工作？
@Brian 两天来我一直在尝试找出完全相同的事情，我开始认为这可能是不可能的。在用户点击观看视频之前，在每个页面加载时默认加载视频并不理想，因此，我仍在尝试寻找方法。
@Envayo 我已经更新了示例，请注意您可能必须在本地使用代码，因为出于安全原因，Stack Overflow 不允许您在 iframe 中播放 youtube 视频，希望对您有所帮助。