CODEWITHSUNDEEP
jqueryyoutubefancybox-2
netdjw
netdjw

Reputation: 6007

jQuery Fancybox opening over a YouTube video

I'm opening fancybox when the page is loaded. If a YouTube video is embed on page it's still visible until I click on prev/next image in fancybox.

Here is the HTML code:

<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>

Here is the jQuery code:

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

How can I position the opened fancybox over the youtube video?

Upvotes: 1

Views: 1379

Answers (1)

sjdaws
sjdaws

Reputation: 3536

Try adding the wmode parameter to the URL and set it to opaque , this should fix your problem.

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

Upvotes: 5

Related Questions