暂停/播放多个嵌入式YouTube播放器

时间:2013-08-07 22:04:09

标签: javascript jquery html video youtube

我有2个缩略图链接,当点击它们时,它们会以灯箱样式打开视频。我的目标是让它们在打开时播放,并在它们关闭时暂停(它们在单击背景区域时关闭)。

我的HTML代码在这里:

<body>
<div id="page">
<br /><br /><br /><br /><br />
<a id="1" class="thumbnail"rel="nofollow"><img class="img1" src="Resources/thumb1.jpg"/></a>
<a id="2"class="thumbnail"rel="nofollow"><img class="img1"src="Resources/thumb2.jpg" /></a>

<div class="backdrop"></div>

<div class="Video"id="vid1" >
    <iframe  allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/7xHXpebWtus?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe1"> </iframe>
</div>

<div class="Video"id="vid2">
    <iframe  allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/PnAsZ1Roxj4?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe2"> </iframe>
</div>

<br /><br /><br /><br />
<h1>More To Come</h1>

</div>

我的Javascript:

$(document).ready(function(){

$('.thumbnail').click(function(){
    var $id = $(this).attr('id');
    $('.backdrop, #vid'+ $id).animate({'opacity':'.50'}, 300, 'linear');
    $('#vid'+ $id).animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, #vid'+ $id).css('display', 'block');
    });

    $('.backdrop').click(function(){
                close_box();
});     

});


 function close_box()
{
    $('.backdrop,.Video').animate({'opacity':'0'}, 300, 'linear', function(){
        $('.backdrop,.Video').css('display', 'none');
    });
};

我应该提一下,我对这些语言都很陌生!

2 个答案:

答案 0 :(得分:0)

您需要使用YouTube API。 Here is tutorial

答案 1 :(得分:0)

您可以使用 YouTube播放器API for iframe嵌入。以下是reference

您可以使用iFRAMEDIV标记创建空的ID,而不是放置SCRIPT代码使用一些 JavaScript 代码。然后代码生成iFRAME并将其放在 DOM 上,删除早期创建的DIVSCRIPT标记。这允许您操纵player标记中的SCRIPT

这是jsFiddle中的工作示例。

P.S。另请注意“要求”部分。