Youtube Video not working within fancybox on ipad when using jquery.fancybox-media.js

Question

I am trying to use youtube video within a fancybox with responsive features such that it can adjust its dimensions according to the device for that i had used jquery.fancybo

Answer 1

Since fancybox version 2.1.0 there is an iframe API option that allows you to preload the contents of an iframe; the default value is true.

Unfortunately, since jQuery v1.9+ I have seen that this option somehow creates issues while trying to display iframe content, specifically with streamed media or PDF documents.

As a workaround, I have been disabling the iframe preload and that has fixed many of the issues reported.

Fancybox uses iframe type for youtube videos, but their homepage still uses the default value (true), however in your own web pages, you should disable this option and your youtube videos will work in iPhone/iPad with no issue :

This hrml for instance

<a class="fancybox" href="http://www.youtube.com/embed/3l8MwU0IjMI?wmode=opaque&autoplay=1">show youtube in fancybox</a>

... with this script

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    width: 620, // or whatever
    height: 420,
    type: "iframe",
    iframe : {
      preload: false
    }
  });
}); // ready

... should work just fine.

NOTE that the autoplay=1 parameter doesn't work in mobile devices, so you still need to click on the video to start (which make sense to me since you may not want to waste your data plan unintentionally)

See JSFIDDLE in iPad ;)

EDIT : if you don't want to have a fixed iframe size (responsiveness), then just get rid of the size options like :

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    type: "iframe",
    iframe : {
      preload: false
    }
  });
}); // ready

See updated JSFIDDLE in iPad