YouTube API：同一页面上的多个嵌入？

Question

如何使用 YouTube API 在页面的不同位置嵌入不同的 YouTube 视频？ （这意味着他们不能共享相同的<div>“玩家”。）他们还根据不同的onclick 事件在不同的时间开始。当页面上只有一个视频时，我的代码可以正常工作，但对于我的一生，我无法弄清楚让这一切都与 2 个或更多视频一起工作的代码！

起初我试图简单地添加多个代码实例，我希望每个实例都存在，但这不起作用。我读到所有玩家都需要添加到一个<script>，所以我尝试了这个：

（另外，<script> 在页面上的哪个位置以及<div>s 在哪个位置有关系吗？<script> 可以写信给<div>，无论它们在页面上的哪个位置？ )

无论如何，这是我正在使用的代码：

// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video1"></div>

// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video2"></div>


<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;
var player2;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('video1',{
                width: '320',
                height: '216',
                videoId: 'VIDEO_ID_1',
                playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
                events: { 'onStateChange': onPlayerStateChange1 } });;
    player2 = new YT.Player('video2',{
                width: '320',
                height: '216',
                videoId: 'VIDEO_ID_2',
                playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
                events: { 'onStateChange': onPlayerStateChange2 } });; }

function startVideo1() {
            player1.playVideo();
            $('#video_box_B1').delay(1000).fadeIn();
            $("#video_box_B1").delay(20000).hide();
        };
function onPlayerStateChange1(event) {        
            if(event.data === 2) {
                $("#video_box_B1").hide();
            }
        }
function startVideo2() {
            player2.playVideo();
            $('#video_box_E5').delay(1000).fadeIn();
            $("#video_box_E5").delay(20000).hide();
        };
function onPlayerStateChange2(event) {        
            if(event.data === 2) {
                $("#video_box_E5").hide();
            }
        }
</script>

// onclick triggers at various places on the page
<img src="image_1.jpg" onclick="startVideo1()" />
<img src="image_2.jpg" onclick="startVideo2()" />

有没有人能说出我做错了什么？顺便说一句，如果我使用静止图像、纯文本或页面上只有一个视频，那些淡入和淡出的容器效果很好，所以不是那些淡入淡出的容器导致了这种情况。它必须是 YouTube 脚本。有人可以帮忙吗？

Answer 1

似乎在这个jsbin中工作：

http://jsbin.com/catuhimo/3/edit

您在哪个浏览器中试用？如果您在 Yosemite 上使用 Safari 最新版本 8.0 (10538.39.41)，jsfiddle 和 jsBin 在渲染内容时会遇到一些麻烦。我在最新的 Chrome 上试用了您的代码，并用实际的视频 ID 替换了占位符，它工作正常。

这有帮助吗？我错过了你问题的重点吗？根据您的要求，这对我来说似乎没问题。