6

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.

Daniel Fischer
  • 181,706
  • 17
  • 308
  • 431
Jizbo Jonez
  • 1,230
  • 10
  • 25
  • 41

1 Answers1

9

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

JFK
  • 40,963
  • 31
  • 133
  • 306
  • In regards to the video going fullscreen behind my browser, it seems it was a windows 7 problem. My computer was flipping out and forcing my browser to stay on top of all other windows, not just the fullscreen video. I rebooted and everything worked perfectly. – Jizbo Jonez Jan 10 '12 at 14:40
  • Thanks for the info you provided JFK I will give your code a try very soon. – Jizbo Jonez Jan 10 '12 at 14:41
  • I woul use jwplayer setup after fancybox adds some placeholder content. 'content': '
    ' and then jwplayer("player").setup({file:"video.mp4"})     – funrob Jan 05 '14 at 00:03
  • @funrob : you could post your own answer if you prefer (improvements are always encouraged.) This answer is 2 years old and jwplayer has evolved since then. Make sure you specify in your answer if any additional js API is required (this answer doesn't require any though) – JFK Jan 05 '14 at 04:36