Can I open youtube video in fancybox.
I have a list of youtube videos links , for ex:
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
and fancubox :
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
I don't want to create for each video new embed object.
There is some plug in, or a way to do that ?
Source: Tips4all
<script type="text/javascript">
ReplyDelete$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
</script>
This way if the user javascript is enabled it opens a fancybox with the youtube embed video, if javascript is disabled it opens the video's youtube page. If you want you can add
target="_blank"
to each of your links, it won't validate on most doctypes, but it will open the link in a new window if fancybox doesn't pick it up.
this isn't the best way, check below for a better way...
also, apparently this is covered at http://fancybox.net/blog
either way, this was originally done in 2010, so just let it be, sheesh.
$("a.more").click(function() {
ReplyDelete$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf', // <--add a comma here
'swf' : {'allowfullscreen':'true'} // <-- flashvars here
});
return false;
});
I started by using the answers here, but modified it to use YouTube's new iframe embedding...
ReplyDelete$('a.video.youtube').click(function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
// "this.preventDefault()" doesn't work here
return false;
});
If you wanna add autoplay function to it. Simply replace
ReplyDeletethis.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
with
this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
also you can do the same with vimeo
this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),
with
this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',
Thanx, Alexander!
ReplyDeleteAnd to set the fancy-close button above the youtube's flash-content add 'wmode' to 'swf' parameters:
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}