YouTube IFrame API - 根据data-video-id设置视频ID

Question

我在点击网站上的按钮后加载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
        }
    });
}

谢谢， 布赖恩

Answer 1

将其作为参数输入函数。我没有使用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>

Answer 2

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

HERE是您的链接。

这是你应该使用的。