如何在iframe中设置动态YouTube ID

Question

我正在使用YouTube API获取基于ID的YouTube视频详细信息。在视频详细信息页面中，我想显示iframe并在我的特定页面上运行视频。

如何更改src中的ID？

src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1">

<iframe
id="existing-iframe-example"
width="640"
height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474f"
></iframe>
<script type="text/javascript">
var tag = document.createElement("script");
tag.id = "iframe-demo";
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("existing-iframe-example", {
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
},
});
}
function onPlayerReady(event) {
document.getElementById("existing-iframe-example").style.borderColor =
"#FF6D00";
}
function changeBorderColor(playerStatus) {
var color;
if (playerStatus == -1) {
color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
color = "#FF6DOO"; // video cued = orange
}
if (color) {
document.getElementById("existing-iframe-example").style.borderColor =
color;
}
}
function onPlayerStateChange(event) {
changeBorderColor(event.data);
}
</script>

Answer 1

在获得youtube视频的ID后，只需更改src

let id ="w8LcxY43N5Y";
document.getElementById("existing-iframe-example").src = "https://www.youtube.com/embed/"+id;

<iframe
id="existing-iframe-example"
width="640"
height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474f"
></iframe>

Answer 2

您可以通过调用player对象上的loadVideoById函数来实现这一点。

在这里的官方文件中找到。

player.loadVideoById('M7lc1UVf-VE',0)