Javascript 打开模式时显示相同的视频

我有以下代码：

JS-Bin
接近
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
（功能（）{
var el=document.createElement（'script'）；
el.src=“//www.youtube.com/iframe_api”；
var s=document.getElementsByTagName（'script'）[0]；
s、 parentNode.insertBefore（el，s）；
视频对话播放器；
视频对话播放器2；
视频对话播放器3；
window.onYouTubeIframeAPIReady=函数（）{
videoDialogPlayer=新的YT.Player（'videoDialogPlayer'{
高度：“390”，
宽度：“640”，
videoId:“Baaydjuly先生”，
});
}
window.onYouTubeIframeAPIReady=函数（）{
videoDialogPlayer2=新的YT.Player（'videoDialogPlayer2'{
高度：“390”，
宽度：“640”，
videoId:'UvRs60UV6YI'，
});
}
window.onYouTubeIframeAPIReady=函数（）{
videoDialogPlayer3=新的YT.Player（'videoDialogPlayer3'{
高度：“390”，
宽度：“640”，
videoId:'RXT_bj_zDAI'，
});
}
}());
.集装箱{
显示器：flex；
证明内容：中心；
}
.集装箱1{
显示器：flex；
边缘顶部：20px；
右边距：20px；
}
.img2{
宽度：90%；
垫底：20px；
填充顶部：20px；
}
.img3{
宽度：90%
}
.集装箱2{
高度：550px；
显示器：flex；
弯曲方向：立柱；
}

欢迎来到Stackoverflow

关于你的代码：每次你打电话

window.onYouTubeIframeAPIReady = function () { ... }

将用

function（）{…}

定义的匿名函数分配给windows属性

onYouTubeIframeAPIReady

。此属性只能有一个值，因此每次分配匿名函数时都会覆盖上一个值

成功加载网页后，将执行存储在

onyoutubeiframeapiredy

属性中的函数，并使用iframe元素替换模式中给定videoDialogPlayer id的div元素。由于该属性只记住您分配的最后一个匿名函数，因此您只能看到第三个视频

为简单起见，我建议您删除hole anonymous函数部分，并用iFrame替换模态中的div元素，如下所示：

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

其副本来自，并发出以下通知：

作为一个额外的安全措施，您还应该包括源代码 参数，指定URL方案（http://或https://） 和主机页的完整域作为参数值。而起源 是可选的，包括防止恶意第三方攻击 JavaScript被注入到您的页面并劫持您的 YouTube播放器

现在，您的模态同时显示所有三个视频。由于这不是您想要的，我们将在下一步解决此问题。 同样为了简单起见，我建议将每个视频放在它自己的模式中，让每个图像成为一个模式切换。因此，每个图像都会打开自己的模式

最后，您的代码应该如下所示：

JS-Bin
接近
接近
接近
.集装箱{
显示器：flex；
证明内容：中心；
}
.集装箱1{
显示器：flex；
边缘顶部：20px；
右边距：20px；
}
.img2{
宽度：90%；
垫底：20px；
填充顶部：20px；
}
.img3{
宽度：90%
}
.集装箱2{
高度：550px；
显示器：flex；
弯曲方向：立柱；
}