How to get fullscreen video on jwplayer when using with fancybox

Question

How do I go about getting fullscreen video on jwplayer when using it with fancybox? Right now I have fancybox opening up a div that contains jwplayer embedding and it works fine, the video plays when pressing play etc so that is all good. The only problem is when I press fullscreen on the video it plays the fullscreen video BEHIND the browser and facybox popup so I cant see it properly. I need the fullscreen to be brought into focus. I noticed that fancybox uses a lot of z-index values, is that what is causing it?

Any help will be much appreciated, thanks.

Answer 1

It all depends how you are embedding the video. I personally don't like to use inline embedded videos because they are loading in the background regardless you see them now or later and that impacts the performance and page load.

The recommended method if you are planning to show them in fancybox is to call them on demand, so with 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 example here