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 http://www.youtube.com (YT index page) or http://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

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.