如何在iframe中设置动态YouTube视频ID

有两种常用方案可以实现切换iframe中的播放视频，以下是具体实现：

方案一：直接更新iframe的src属性 #

这种方式简单直接，通过DOM操作替换src中的视频ID即可：

1. 定义更新视频ID的函数：

function updateIframeVideoId(newVideoId) {
  const iframe = document.getElementById('existing-iframe-example');
  iframe.src = `https://www.youtube.com/embed/${newVideoId}?enablejsapi=1`;
}

2. 获取到目标视频ID后调用该函数：

// 示例：切换到ID为"dQw4w9WgXcQ"的视频
updateIframeVideoId('dQw4w9WgXcQ');

方案二：使用YouTube Player API的loadVideoById方法 #

如果你已经通过Iframe API初始化了播放器实例，推荐使用官方API方法切换视频，能更精准地控制播放器状态：

1. 在现有代码基础上添加切换函数：

function loadNewVideo(newVideoId) {
  if (player) {
    // 可额外添加参数，比如指定起始播放时间：player.loadVideoById({videoId: newVideoId, startSeconds: 10})
    player.loadVideoById(newVideoId);
  }
}

2. 调用函数切换视频：

loadNewVideo('dQw4w9WgXcQ');

注意点 #

• 确保iframe的src中包含enablejsapi=1参数，否则无法正常使用Player API的功能。
• 现有代码的changeBorderColor函数里存在拼写错误：#FF6DOO应改为#FF6D00，否则对应状态的边框颜色无法正确显示。

内容的提问来源于stack exchange，提问作者Veet Thomson