How to get full screen video on jwplayer when used with fancybox

Question

How do i get fullscreen video on jwplayer when using it with fancybox? Right now I have a fancybox that opens a div that contains jwplayer embed and it works fine, the video plays when I click play, etc., so that's all good. The only problem is when I click full screen on the video that it plays in full screen video, depending on the browser and the facybox popup, so I don't see it correctly. I need the whole screen to be in focus. I noticed that fancybox uses a lot of z-index values, is that what causes it?

Any help would be greatly appreciated, thanks.

Answer 1

It all depends on how you embed the video. I personally don’t like using the built-in embedded videos, because they load in the background, regardless of whether you see them now or later, and this affects the performance and page loading.

The recommended method, if you plan to show them in fancybox, is to call them on demand, so using this html:

<a class="video" href="pathToVideo/video.flv">open my video in fancybox</a> 

use this script:

 <script type="text/javascript"> $(document).ready(function(){ $("a.video").click(function() { $.fancybox({ 'padding' : 0, // optional 'title' : this.title, 'content': '<embed src="jwplayer.swf?file='+this.href+'&amp;autostart=true&amp;fs=1" type="application/x-shockwave-flash" width="352" height="240" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>' }); // fancybox return false; }); // click }); // ready </script> 

See an example here.