jwplayer in fancybox not playing on ipad/iphone

Question

I'm using the following code but videos won't play with jwplayer inside fancybox on iOS (ipad/iphone)...works fine otherwise. I appreciate that iOS doesn't handle flash, but I'm unsure of how to modify this code to provide for the html5 fallback...

<script type="text/javascript" src="scripts/jwplayer/html5/jwplayer.html5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".video_popup").fancybox({
    fitToView: false, // to show videos in their own size
    content: '<span></span>', // create temp content
    scrolling: 'no', // don't show scrolling bars in fancybox
    afterLoad: function () {
      // get dimensions from data attributes
      var $width = $(this.element).data('width'); 
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='scripts/jwplayer/player.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });

Answer 1

iOS only supports video streaming over the HTTP protocol, unlike Flash where you can use RTMP. A configuration example how to configure JWPlayer using a HTML5 fallback solution can be found in the documentation.

However, you need to keep care of these lines:

'provider': 'rtmp',
'streamer': 'rtmp://rtmp.example.com/application',
'file': 'sintel.mp4'

As said, iOS only supports streaming over HTTP, so you would need something like:

'provider': 'http',
'streamer': 'http://rtmp.example.com/application',
'file': 'sintel.mp4'

Of course your streaming server must support streaming over HTTP as well.

---

EDIT

In order to setup your JWPlayer in fancybox you can use the methods as usual. There is nothing special using Fancybox and JWPlayer together.

HTML

<div class="video_popup">
    <div id="mediaplayer">Here the player will be placed</div>
</div>

Javascript (adapted from your question)

$(document).ready(function() {
  $(".video_popup").fancybox({
  fitToView: false, // to show videos in their own size
  scrolling: 'no', // don't show scrolling bars in fancybox
  afterLoad: function () {
    // get dimensions from data attributes
    var $width = $(this.element).data('width'); 
    var $height = $(this.element).data('height');

    // now, use JWPlayer to setup the player instead of embedding Flash
    jwplayer('mediaplayer').setup({
      // configuration code as in the documentation
    });
  }
});

Answer 2

With help from w4rumy, I have managed to get jwplayer working in fancybox using html5, so plays on ipad/iphone:

<script type="text/javascript" src="scripts/jwplayer6/jwplayer.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
  $(".video_popup").fancybox({
  fitToView: false, 
  scrolling: 'no', 
  content: '<div id="myvideo"></div>',
  afterShow: function () {
   jwplayer('myvideo').setup({
        file: this.href,
        autostart: 'true',
         modes: [
        {type: 'flash', src: 'scripts/jwplayer6/jwplayer.flash.swf'},
        {type: 'html5', config: {file: this.href, provider: 'video'}},
    ]
    });
  }
});