12/9/12 UPDATE: Check out the new version of this post, with the updated version of fancyBox which allows for responsive, size adjusting videos.
It’s easy enough to copy the code that YouTube gives you to simply embed a video on your website. But what if you have a lot of videos that need to go on one page? It would be a lot cleaner to have smaller images of the videos; which you could click on to watch the video, all without leaving the webpage. Fancybox is an easy solution to this, checkout the demo to see how clean this method looks.
Here’s the code to use to make this happen, I placed it in an external javascript file in the demo version.
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
Then simply add the image to the page and call fancybox like this:
<a class="video" title="The Falltape" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1"><img src="images/1.jpg" alt="" /></a>
In order to add your own video, just copy the link from the YouTube video you want and replace it in the code above. One extra thing I did was to add: autoplay=1 at the end of the code that I copied from YouTube. This is so that when the video opens over the screen it will automatically start playing. If somebody clicked the thumbnail of the video they obviously want to watch the video, so why make them click play twice?
Feel free to grab the demo to speed up your coding time.
