FancyBox not working with YouTube

[Gene]

So... I've already read Example #4 here: http://fancybox.net/blog

and my problem is similar to the one here:
http://groups.google.com/group/fancybox/browse_thread/thread/b8b660af196e412e/f3cb16d4242cf25f?lnk=gst&q=video#f3cb16d4242cf25f

But I still can't get the youtube video to display in FancyBox. When I
click on the link, it just opens up the video in a new tab. I've been
banging my head against the wall in frustration all afternoon. I just
don't see what the issue is.

I also have a secondary question... why is the type 'swf'? Doesn't
that correspond to flash? YouTube files are in the flv format. Could
that be the problem? There was another post that suggested changing
swf to iframe in order to let the browser decide, but the code for
that was different than the example #4 code and what I have pasted
below.

Any help would be appreciated.

My code is:

[code]
<script type='text/javascript' src='js/
jquery.fancybox-1.3.4.pack.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#watchvid").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 560,
'height' : 315,
'href' : this.href.replace(new RegExp("watch\\?v=",
"i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
</script>

<a id="watchvid" href="http://www.youtube.com/watch?
v=071KqJu7WVo&feature=player_embedded" title="How it works">Learn
more</a>
[/code]

[RavanH]

The example from fancybox.net uses the old Youtube (flash only) embed
method. This does not work on browsers that do not have Flash like on
iPad and such... The new embed method works with an iframe. You can
implement it like this:

$('a.fancybox-youtube').fancybox( { 'type' : 'iframe', 'width' : 560,
'height' : 315, 'onStart' : function(selectedArray, selectedIndex,
selectedOpts) { selectedOpts.href =
selectedArray[selectedIndex].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') } );

and use links with class="fancybox-youtube" like this:

<a class="fancybox-youtube" href="http://www.youtube.com/watch?

v=071KqJu7WVo&feature=player_embedded" title="How it works">Learn
more</a>

The RegExp also works on the youtu.be short-urls and by using a class
instead of ID you can place multiple youtube links on one page. If you
do not need that last part, you can simply keep #watchvid of course.

On 31 dec 2011, 01:06, Gene <egmpr...@gmail.com> wrote:
> So... I've already read Example #4 here:http://fancybox.net/blog
>

> and my problem is similar to the one here:http://groups.google.com/group/fancybox/browse_thread/thread/b8b660af...

[Gene]

Thank you!

On Jan 1, 3:05 am, RavanH <ravanha...@gmail.com> wrote:
> The example from fancybox.net uses the old Youtube (flash only) embed
> method. This does not work on browsers that do not have Flash like on
> iPad and such... The new embed method works with an iframe. You can
> implement it like this:
>
> $('a.fancybox-youtube').fancybox( { 'type' : 'iframe', 'width' : 560,
> 'height' : 315, 'onStart' : function(selectedArray, selectedIndex,
> selectedOpts) { selectedOpts.href =
> selectedArray[selectedIndex].href.replace(new RegExp('youtu.be', 'i'),

> 'www.youtube.com/embed').replace(newRegExp('watch\\?v=([a-z0-9\_\-]+)