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

我在加载YouTube的IFrame API后，有人点击我网站上的按钮。它加载在模态窗口中。在这个按钮上，我也有一个“data-video-id”属性中的视频ID。有没有办法将视频ID动态加载到YouTube API中，而不是像下面那样在API代码中静态声明视频ID？YouTube IFrame API - 从data-video-id设置视频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 
     } 
    }); 
}

感谢，布赖恩

来源

2017-08-04 Brian

将其送到功能像这样的参数。我没有使用这个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>

来源

2017-08-04 20:18:38 Win

它似乎不起作用。我正在交换“价值（）;”为“data-video-id（）;”因为那是我的视频ID在按钮上的位置。我得到了一个“视频未定义”的行。 – Brian

您需要将其交换到'document.getElementById（'ipt-video'）。dataset.videoId'，请参阅更新的示例。 – Win

直到点击按钮后，我才加载YouTube API脚本。是否有可能继续做这项工作？ – Brian

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

HERE是您的链接。

这就是你应该使用的。

来源

2017-08-05 16:07:36 Tempus

如果直到点击按钮后才加载YouTube脚本，这项工作是否可行？ – Brian

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

回答

相关问题