On one of my recent projects, I needed to embed YouTube videos on a page using a lightbox-type plugin. Naturally, the first thing I do when confronted with something like this is to hit up Google. I ended up finding a few different solutions.
First off was Videobox - this is exactly what I wanted -- but ehh, it uses mootools. Nothing against mootools, its a great little framework - but the whole site where this is going is already using jQuery.
Next I found CeeBox - ahh - exactly what I want. This guy took Videobox and ported all the best parts over to jQuery. But, oh wait, it uses the Thickbox plugin. I forgot to mention that the site is already using the FancyBox plugin for images in other places and I'd like to keep the interface consistent.
Ok, so what I ended up doing was doing the same thing Ceebox did except with Fancybox. I only added support for YouTube because that is all I needed at the moment (YAGNI, right?).
I think the end result turned out really nice. All you need to do is include a link to the original YouTube video like so:
<a href="http://www.youtube.com/watch?v=rP-2ksWFk4o" rel="fancyvideo">Pop me up</a>
Then just wire up the script to all links with rel="fancyvideo":
<script type="text/javascript">
$(document).ready(function() {
$("a[@rel*=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360
});
});
</script>
This has the great advantage of gracefully scaling down for browsers with javascript disabled and just providing a link to the video. For those with javascript enabled, the script automatically detects the link to YouTube (via regex) and handles embedding the video into a nice little popup window.
You can see a demo of it here and get the files here. (By the way, the video in the demo is me fighting with myself via dog weaponage. haha - I crack myself up...)
Currently rated 4.7 by 12 people
- Currently 4.666667/5 Stars.
- 1
- 2
- 3
- 4
- 5
Programming
jquery