Slick Videos Presentation With Fancybox

Recently, a friend of mine asked me how it would be possible to play videos directly from within a fancybox.

This post presents the solution I usually use, and reviews the different elements needed, html, css and javascript, along with details on how they interact with each others in order to obtain the expected result.

Demonstration

Please click on the image to launch a video in a fancybox.

How to setup

What we want to achieve

As you can see in the demonstration, what we want to obtain is as follows. We want to display a thumbnail of the video, in a link. This little illustrative picture will be the only thing that is going to be visible by the user. When the user will click on the image, we will open a fancybox with an overlay, and the video will start playing automatically in it. The size of the fancybox will match the one of the object for a better effect.

The Html Code

Ok so now that we now where we are going, let's add the link, the image, and the embed code of a video (taken from YouTube for example):

<!-- The Video Thumbnail -->
<a id="videolink" href="#videocontainer" title="videotest">
  <img src="/Images/resources/videotest.jpg" />
</a>
 
<!-- The Video Object -->
<div id="videocontainer">
 <object width="480" height="295">
  <param name="movie" 
    value="http://www.youtube.com/v/SC-2VGBHFQI&hl&autoplay=1">
  </param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed 
    src="http://www.youtube.com/v/SC-2VGBHFQI&autoplay=1" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
  </embed>
 </object>
</div>

In the previous code, we can see that a link has been created with an id #videolink. You can remark that the href attribute of the link contains the anchor #videocontainer, which is in fact the target for the fancybox content. In other words, when we will open the fancybox, the content of the div #videocontainer will be loaded inside.

Knowing that the fancybox also nicely displays the links' title attributes when opened, you should add the title of your video inside the link's title tag if you want to show it.

In brief, you need to create a link which has an id, and whose target is the video container. You can put anything you want in the link, I tend to use video thumbnails as they give the user a little clue of the video content.

On the second part of the code, we create another div, (whose id is therefore equal to the link's href attribute), and that contains the embed code of your video ( I copied mine from a YouTube page ). The only remarkable thing here is therefore the fact that I added '&autoplay=1' after the video address so when it is opened it will play automatically.

The jQuery Setup

Then, let's move on to the jQuery setup. We first need to include the required files, the jQuery library, the fancybox plugin and the fancybox style sheet:

/** jQuery Inclusion **/
<script type="text/javascript" src="Path_to/jQuery.js"></script>
/** Plugin Inclusion **/
<script type="text/javascript" src="Path_to/jquery-fancybox.js"></script>
/** Additional Style **/
<link href="Path_to/fancybox.css" rel="stylesheet" type="text/css" />

Then, we need to setup the fancybox plugin with our link #videolink. ( If you need more direction on how to do this, please visit the fancybox tutorial. )

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("a#videolink").fancybox({
      frameWidth: 480, 
      frameHeight: 295,
      overlayShow: true,
      overlayOpacity: 0.7
    });
});
</script>

Please note that the frameWidth and frameHeight options are equal to the width and height of the video. Also, as it is nicer to play video with an overlay that hides slightly your website in the background, we set the option overlayShow to true, and we apply a 50% opacity.

Conclusion

As the fancybox is a very powerful plugin, it is nice to benefit from its functionalities effortlessly. When associated with videos, it gives a very good looking result for the end user. This way of playing the videos can be particularly effective on portfolio or multimedia pages. To extend the reading of this post, I suggest css globe's Alen Grakalic's article, about a different approach of the same subject, that was issued this week too.

Why not share this here:

Posted Comments

thanks for this, to get it to work properly in Safari I needed to add (maybe usefull for somebody else using it)

hideOnContentClick:false

But thanks a lot you saved me hours of work!

From salty at 20:49 09/07/10 { Reply }

I am trying to put this on my site, and the video was appearing in the div until I used the display:none property, however now, when you click on the image, the pop us has nothing it - i've been over the CSS on this site and the code, and can't seem to figure out what I'm doing wrong. any thoughts?
http://www.ilovestudiothree.com/beta/press

From Rob at 04:47 22/06/10 { Reply }

Thank you SO much for this tutorial. It was exactly what I was looking for help display the sidebar videos in a lightbox on http://www.alistmagazine.com. You're awesome for sharing and explaining the code tweaks!

From Grace at 21:37 02/06/10 { Reply }

With version 131 it is possible to add youtube trailers in by default. Check: http://fancybox.net/blog #4 for more info

Cheers!

From xfinx at 08:05 11/05/10 { Reply }

@jdmweb. Hi Jeremy! Thanks a bunch for your reply. I tried the display:none property. I've managed to fix it. But the problem was in the header, where I included the css and fancybox in a wrong way. Although I must have the display property in a new div which has a div in it (containing the object) :) But it works just fine now. Thanks a bunch again! :) Have a great day!

From tippi at 08:44 28/04/10 { Reply }

@tippi.
Hey Tippi, thanks for your comment.
Regarding your issue, I'm not sure I quite understand, can you send me a link so I can have a look?
If your problem is that the player is not hidden by default, have you tried to add the display:none property to it in your css? I use a class and some basic CSS properties to hide the player, which is then revealed within the fancybox.

From jdmweb at 18:34 27/04/10 { Reply }

Hello!
This was really nice. I searched around and could not get it to work. But with your help i fixed it! Thank you! I have one question though. I did it with links instead of images. But for some reason the clip shows up on my page in a box and is playable. I only want the link to fire up fancybox (which it does). How do I get rid of the clip in the box? It seems like it displays the content of the div. Which is the object. Any ideas or tips to give me? I would appreciate it. Good work!

From tippi at 10:48 27/04/10 { Reply }