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

Question

有人点击我网站上的按钮后，我正在加载YouTube的IFrame API。它在模式窗口中加载。在此按钮上，我的“视频ID”也位于“data-video-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>