Can't load YouTube video in Fancybox - blank p

Question

Folks,

I'm trying to open a youtube video in fancybox using the following code:

<script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function(){      
        jQuery("a.video").fancybox({            
                'hideOnContentClick'    : false,
                'width'         : '50%',
                'height'        : '50%',
                'autoScale'     : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'          : 'iframe'
        });
    });
// ]]></script>

The fancybox iframe gets called by:

<a class="video" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img title="sometitle" src="http://pathToImage.png" alt="" width="140" height="103" /></a>

The fancybox pops up just fine. However, when a YouTube video is called, a white blank iframe is displayed.

When replacing the YT URL with http://www.amazon.com for example, the Amazon page gets loaded just fine. When using www.youtube.com (YT index page) or www.google.com, again a blank iframe is loaded.

I've been searching via google and stackoverflow for hours but couldn't find a solution that worked.

Help very much appreciated.

---

EDIT 02/01/2012: Sudhir, tanhuong, JFK, thanks for posting your answers. Much appreciated.

I used JFKs solution which worked great. Sorry, as a newbie here on SO I can't rate your answers. Otherwise I sure had.

Answer 1

my solution: add 'type' : 'iframe' when you call fancybox() function. Like this: $("a#iframe-landing").fancybox({ 'type' : 'iframe' });

and it works. Hope it helps.

Answer 2

Try:

$("a.video").fancybox({
            'titleShow'     : false,
            'hideOnContentClick'    : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'      : 'swf',
            'swf'       : {'wmode':'transparent','allowfullscreen':'true'}
        });

Hope it helps

Answer 3

Recently youtube embed code changed and it looks something like this: http://youtu.be/zH5bJSG0DZk. The way fancybox was working before looked something like this:

'href' : this.href.replace(new RegExp("watch\\?v=","i"), 'v/')

Now, that is not really working with the new embed URL. After spending a few hours looking for a solution, I found it here: http://groups.google.com/group/fancybox/browse_thread/thread/e8f81f420eed7c3c/f12af70aded87c2a

Basically, it switches the fancybox call to this:

 $.fancybox({
                    'padding' : 0,
                    'type' : 'iframe',
                    'href' : this.href.replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9\_\-]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3')
 });

I tested it with current embed code and old embed code and it seems to be working with both.

Answer 4

Sudhir's code is close but won't work; the right code to use for this scenario is:

$(".video").click(function() {
 $.fancybox({
  'hideOnContentClick': false,
  'autoScale': false,
  'transitionIn': 'none',
  'transitionOut': 'none',
  'title': this.title, // optional
  'width': 680, // or your size
  'height': 495,
  'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
  'type': 'swf',
  'swf': {
    'wmode': 'transparent',
    'allowfullscreen': 'true'
  }
 }); // fancybox
 return false;
}); // click

On the other hand, if you want to open external websites, the right type is iframe, however bear in mind that you won't be able to open google or yahoo and some other specific sites inside of fancybox (they won't like to be contained in iframes due to some ads policies, check this for more )... you may open your own website or external web pages though.