YouTube API:多个嵌入在同一页面

Question

如何使用YouTube API在页面的不同位置嵌入不同的YouTube视频?(这意味着它们可以而不是共享相同的<div>"播放器"。)它们也根据不同的onclick事件在不同的时间开始。当页面上只有一个视频时，我的代码工作得很好，但对于我的生命，我无法找出代码来让这一切与2个或更多的工作!

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

(另外，在页面上<script>在哪里以及<div>在哪里重要吗?

<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取代了占位符，它工作了。

有帮助吗?我没有抓住你问题的重点吗?根据你的要求，它似乎适合我。