jQuery Fancybox打开YouTube视频

时间:2013-02-22 11:32:34

标签: jquery youtube fancybox-2

我正在加载页面时打开fancybox。如果YouTube视频嵌入页面,则在我点击fancybox中的上一张/下一张图片之前,它仍然可见。

以下是HTML代码:

<div id="fancycontainer">
    <a href="img/normal/01.jpg" rel="fg" class="fg" id="fg_1"><img src="img/stamp/01.jpg"></a>
    <a href="img/normal/02.jpg" rel="fg" class="fg" id="fg_2"><img src="img/stamp/02.jpg"></a>
    <a href="img/normal/03.jpg" rel="fg" class="fg" id="fg_3"><img src="img/stamp/03.jpg"></a>
</div>
<p><iframe width="420" height="315" src="http://www.youtube.com/embed/P2-VGDF4y18" frameborder="0" allowfullscreen></iframe></p>
<p>blah blah...</p>

这是jQuery代码:

$(function() {
    $('.fg').fancybox();
});
// autoopen
$(document).ready(function() {
    $('#fg_1').trigger('click');
}

如何将打开的fancybox放在youtube视频上?

1 个答案:

答案 0 :(得分:5)

尝试将wmode参数添加到网址并将其设置为opaque,这可以解决您的问题。

<p><iframe width="420" height="315" src="http://www.youtube.com/embed/P2-VGDF4y18?wmode=opaque" frameborder="0" allowfullscreen></iframe></p>