CODEWITHSUNDEEP
jqueryfancybox
Greg
Greg

Reputation: 567

Why is FancyBox Youtube video comsuming the screen?

I have fancybox with a youtube iframe inside. When you click on the video it opens up to fit the whole screen. Any ideas on why this is happening?

here are the scripts and links

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

here is the jquery

<script type="text/javascript">
$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

</script>

and the markup

<div>
        <a class="various fancybox.iframe" href="http://www.youtube.com/embed/mvJNlFTswKQ?rel=0?autoplay=1" title="teaser" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','Images/video_tour2.jpg',1)"><img src="Images/video_tour1.jpg" alt="take a video tour" name="Image6" width="340" height="81" border="0" id="Image6" /></a>
        </div>

thanks!

Upvotes: 1

Views: 1187

Answers (1)

JFK
JFK

Reputation: 41143

It seems to me that actually fancybox is not opened at all.

If you click this link for instance http://www.youtube.com/embed/mvJNlFTswKQ?rel=0?autoplay=1 it will open the youtube in the full viewport with no fancybox at all, as it is happening to you.

When you click on the link, it doesn't fires fancybox because it produces a js error, so the video opens and uses the whole viewport.

This is because you are loading the fancybox js file before the jQuery js file.

All jQuery plugins js files should be loaded always AFTER the jQuery js file.

Upvotes: 2

Related Questions