Search the blog

Colorbox is without a doubt one of my favourite scripts and is a quick and easy way to draw HTML over your content in a nice light box. Colorbox also lets you link directly to YouTube videos too by dynamically creating an iFrame. Here’s how.

First, download Colorbox here (don’t forget to include the JavaScript and CSS on your web page!) and then create an instance of Colorbox like this:

$('a.video-link').colorbox({

    iframe: true,
    innerWidth: 640,
    innerHeight: 390

});
The document should be “ready” when the above code is called: $(function() {});

Then simply create your link:

<a class="video-link" href="http://www.youtube.com/embed/xxxxxxxxx" target="_blank">Video Link</a>
You will need to get the embed code from YouTube

You can change the innerWidth and innerHeight settings to control the size of your light box/video.

Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.