【发布时间】：2020-04-07 04:18:53
【问题描述】：
我有以下代码：
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Open a modal dialog button -->
<div class="container" data-toggle="modal" data-target=".video-dialog">
<div class="container1">
<img class="1" src="1.PNG">
</div>
<div class="container2">
<img class="img2" src="1.PNG">
<img class="img3" src="1.PNG">
</div>
</div>
</div>
<!-- Video Player Dialog -->
<div class="modal fade video-dialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div id="videoDialogPlayer" class="vidflex"></div>
<div id="videoDialogPlayer2" class="vidflex"></div>
<div id="videoDialogPlayer3" class="vidflex"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
(function () {
var el = document.createElement('script');
el.src = "//www.youtube.com/iframe_api";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(el, s);
var videoDialogPlayer;
var videoDialogPlayer2;
var videoDialogPlayer3;
window.onYouTubeIframeAPIReady = function () {
videoDialogPlayer = new YT.Player('videoDialogPlayer', {
height: '390',
width: '640',
videoId: 'mRBaAYdJuLY',
});
}
window.onYouTubeIframeAPIReady = function () {
videoDialogPlayer2 = new YT.Player('videoDialogPlayer2', {
height: '390',
width: '640',
videoId: 'UvRs60UV6YI',
});
}
window.onYouTubeIframeAPIReady = function () {
videoDialogPlayer3 = new YT.Player('videoDialogPlayer3', {
height: '390',
width: '640',
videoId: 'RXT_bj_zDAI',
});
}
}());
</script>
<style>
.container {
display: flex;
justify-content: center;
}
.container1 {
display: flex;
margin-top: 20px;
margin-right: 20px;
}
.img2 {
width: 90%;
padding-bottom: 20px;
padding-top: 20px;
}
.img3 {
width: 90%
}
.container2 {
height: 550px;
display: flex;
flex-direction: column;
}
</style>
</body>
</html>这会显示三张图片，当点击一个模态打开和一个 youtube 视频时，但模态上只显示相同的视频，我无法修复以显示不同的视频。顺便说一句，我正在使用 youtube API 来显示视频，所以我不知道如何仅使用 javascript 而不是像现在这样使用引导程序来做到这一点。
我把
window.onYouTubeIframeAPIReady = function () {全局，所以现在所有视频都会出现，但同时出现。我每次都需要展示不同的
【问题讨论】：
标签： javascript jquery youtube-api