Lightbox for YouTube Videos

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 rel="fancyvideo" href="">Pop me up</a>

Then just wire up the script to all links with rel="fancyvideo":

$(document).ready(function() {
        overlayShow: true,

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.


Fancybox now supports Youtube videos natively negating the need for the modified fancybox files here.

👋 Hi! I’m Chad. I’m a Tech Lead turned founder, but I mostly see myself as a web developer specializing in the .NET Core, React, and Node.js ecosystems. I like to build tools to make developers’ lives easier. I am currently working on a modern job platform for .NET Core and Node.js.


What is this?


  1. Patrick

    Can you help.

    I have been looking around to find a way of displaying both Video ( Youtube content ) and Images in the same webpage using your variation of the Lightbox script.

    Can you tell me firstly is it possible and second how I can do this, I am not a programmer but love using this tool.

    Thanks in advance for your help.


  2. samix

    great job i was looking for video support with fancybox....i tried it for videos and really i liked it, but how can you activate an image ? (in the same page of the video? your script for videos only?

    1. Chad Lee
      Chad Lee

      Yes, the fancybox normally only works with images. This script simply adds the ability to use videos with it. You can still use the fancybox as normal to show images. Basically, instead of a link to a youtube video, you just use a link to an image.

      You can go check it out the fancybox documentation for more info.

  3. derkoidus

    Ceebox was awesome but combined with fancy box. Adds a zooming out effect that makes it look like flash. Great Job!! The only drawback is that it only works with JQuery 1.2.6. If anyone got this to work with the latest jquery 1.3.2. post please.

  4. chill


    You are the MAN. I really like this. It is exactly what I was looking for. Thank you for making such a great script.

  5. HP

    It seems like you have done some modification directly within jquery.fancybox-1.0.0.js. Can you note down where did you change? I need to port to change to jquery.fancybox-1.2.1.js. Thanks

  6. Char

    Thanks for making this script!!!!!!

  7. naet

    Any plans on updating this for the latest versions of jquery/fancybox??? That would be great.

  8. Tony

    For all those who want to use this with later versions from the @ symbol both in the initiation process and in the script. just to a search for @ and get rid of it

  9. Colin

    Nice work!
    BTW. I've recently updated <a href="">CeeBox</a> to work with jquery 1.3.2. The fix is pretty easy. You need to change:

    var arr = $("a[@rel=" + el.rel + "]").get();


    var arr = $("a[rel=" + el.rel + "]").get();

    Also, I suggest you change your script to use the <a href="">jquery.swfobject.js</a> jQuery plugin asI have since it's much smaller than the full swfobject.js.

  10. Colin

    Noticed the links got messed with so removed them and reposted comment

    Nice work!
    BTW. I've recently updated CeeBox to work with jquery 1.3.2. The fix is pretty easy. You need to change:

    var arr = $("a[@rel=" + el.rel + "]").get();


    var arr = $("a[rel=" + el.rel + "]").get();

    Also, I suggest you change your script to use the jquery.swfobject.js jQuery plugin asI have since it's much smaller than the full swfobject.js.

  11. Rimu

    The close button doesn't work in IE

  12. Tam

    I'm getting:

    uncaught exception: Syntax error, unrecognized expression: [@rel*=fancyvideo]

    Any idea why?

    1. Chad Lee
      Chad Lee

      For jQuery >= 1.3.2, change it to $("a[rel=fancyvideo]")

  13. adi

    Hi , I had been desperately tring to make this work here , I added the rel="fancyvideo" to all my youtube links (Under the "Related Videos" )
    still no luck ,Chad could you suggest that seems to be the problem.
    here is the post

    1. Chad Lee
      Chad Lee

      Did you wire up the links with ("a[@rel*=fancyvideo]").fancybox(); ? I just gave your site a cursory glance and didn't see that anywhere.

    2. adi

      Hey Chadly I just added the [quote]<script type="text/javascript">
      $(document).ready(function() {

      On the header file still no luck !!! I can't tell, how badly I want this to be running .

  14. Mike

    Thanks for this! - It's great and just what I needed!

    Only problem for me is that it isn't automatically starting the video and I'm having a bit of problem troubleshooting it. What part of the script should I be taking a look at?


  15. sne

    Chadly im also not winning. im trying to use with my wordpress theme. i did just like adi did. put the <script type="text/javascript">
    $(document).ready(function() {
    .......... </script> code in header.php and <script type="text/javascript" href="<?php bloginfo('template_directory'); ?>/swfobject.js" /> for all other .js files. It just dont work. Any idea why?


  16. Tim W.
    Tim W.

    Great script. I had a little trouble getting it to work with my Wordpress site, but checking out what code you had on your demo page helped. I do have one issue which is frustrating me a little. I don't know whether it's the code or what, but when I link to a Vimeo video, the video is very small and at the side of the popup window. I've tried to add dimensions to increase its size, but nothing works. Any help would be greatly appreciated.

    Here's the page it's on...

  17. Dale F
    Dale F

    Hi, I am very green to scripting for the most part and I am wondering what exactly you meant when you wrote just wire up the script to all links with rel="fancyvideo". I pasted that into the script, but wasn't sure where to do it and when I click on the link it just brings me to youtube.

  18. MediaSpark

    Hi Chadly - thanks for great plugin. Something I noticed was a bit strange whilst testing across browsers...

    Chrome - good quality video
    FireFox - good quality video
    IE - bad quality

    I tested IE using version 8.

    The videos can be found at

    Would this problem be with new resolution changes on youtube that IE doesn't like?

    You comments would be most appreciated.

  19. Chad

    This is awesome. Thanks!

  20. mike


    I want to say thank you for this nice lightbox script.
    A question if you dont mind, do you have similar script but to be able to use jwplayer flv player?
    I am not a programmer, i mean if you have ready one to be dowloaded same as you have this one, because i tried to figure out how it works on their site, lol i got headaches:)


  21. Andrew Tarcon
    Andrew Tarcon


    If you guys are not getting your thing to work. Carefully check everything. Put your scripts in a "scripts" folder. Put your fancy.css inside "fancybox" folder and that goes inside the "scripts" folder. Put all of the images inside the fancybox folder as well.

    Then make sure you have the rel="fancybox" within the link of the video you want to display.

    I couldn't get mine to work for the longest time and I found it won't work if you have any scripts below this:

    <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.pngFix.pack.js"></script>
    <script type="text/javascript" src="scripts/jquery.fancybox-1.0.0.js"></script>
    <script type="text/javascript" src="scripts/swfobject.js"></script>
    <link rel="stylesheet" type="text/css" href="scripts/fancybox/fancy.css"/>

    <script type="text/javascript">
    $(document).ready(function() {
    overlayShow: true,

    So make sure to put your linked script files above this code. Hopefully that helps. I must've been trying for an hour trying to get everything right. And that was the problem.

  22. Andrew Tarcon
    Andrew Tarcon

    Oh and also check to see if you have newer/older version of the jquery library already linked on your page. If you do, you do not need them. You can use the library that comes with this package.

  23. Jeremy

    I have a question that's related to this post, and am hoping someone can help me out.

    I'd like to know if YouTube tracks viewer statistics when the video is displayed via someone's lightbox (in my case I used prettyPhoto ... in your case it's fancybox).

    I ask because we've had a lot of visitors come to the site recently, yet YouTube's viewer stats don't seem to be increasing. I know people are watching the videos because our average time on site is 5 minutes, and there's just not much text to read!

    I suspect it has something to do with the lightbox (i.e. prettyPhoto or fancybox), because they only require the URL, not the YouTube embed code, when implemented on-site.

    If you'd like to see how the videos are being presented on the site, go to , scroll down a bit, and click on the button that says, W.I.I.F.Y.

    Thanks in advance for any assistance. And Happy St. Patty's Day!

  24. Kevin

    This is great. I've gotten to work for the most part and I have zero js experience. I do have one problem.

    When I play a video, if I try to adjust the volume or skip ahead in the video, the screen goes white and says "No Video Available".

    Any help would me much appreciated. Thanks!

  25. Nawras

    THAaaaaaaaaank YOUuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

  26. brad

    First of all, thank you. Secondly, does anyone have a fix for jquery version 1.4.4? If so, I'd love to see it as the original and 1.3.2 fixes mentioned above do not work.


    1. brad

      Okay, I actually was able to solve this. Does anyone know how to make it so the thumbnail is the link instead of text? Basically, I want to show 5 video thumbnails and then when clicked, that video would popup in the lightbox in a larger size. Thanks!

    2. Will

      How did you fix this for Jquery 1.4.4? Any advice would be appreciated.
      Thank you!

  27. claudia

    quiero agradecerte el enorme favor....esta excelente...y se ve salvaste.....fabuloso felicitaciones!!!!!!

  28. Rozzane

    Thank you! It works great!!

  29. Joe

    Great work! I was looking for exactly this and it was the first link I clicked!

    Got it all working smoothly very quickly then I uploaded it to my server and it doesn't work! Any thoughts would be massively appreciated. It's probably something simple but I've got tunnel vision now ;-)

    Cheers for posting it though!

  30. Mark Holand
    Mark Holand

    You sir are a genuiney LEGEND!! And thanks to Andrew for your post, fixed my issue of not knowing where the hell to put the files. You should update the post with that info to help people new to code with this.

    Awesome work mr, THANK YOU!!

  31. vikas

    hey, i couldnt understand it. I want to add this fancybox facility to my blogger blog page, where the page name is video gallery. when people click on particular thumbnail that video should be opened in fancybox. plz help me. mail me at i will not come to know if you reply me here. so plz help..i really need help

  32. Emil

    Hi. Nice script! Thanks a lot.
    Vondering, how I make it auto play?

  33. Avner

    I can't get it work. Clicking makes the screen darker but then the browser goes to instead of opening a light box.

  34. Gary

    little help. i have the light box working, but the video isn't displaying...

    "This content cannot be displayed in a frame. To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."

    Blank Lightbox.

  35. Mick

    Howdy Chadly... I recently stumbled upon your lovely Fancybox plugin. I realized out of the box that it no longer works with jQuery v1.8.3. I fixed the issues, and it now functions correctly under jQuery v1.8.3.

    I could not find an email address for you (you might want to change that, add a contact link or something), but I will place the fix here as a general description. If you want further information for any reason, just shoot me an email.

    The fix is as follows:

    Update the:

    $("a[@rel*=fancyvideo]").fancybox ()

    call to


    where you initialize your JS code

    Update line #73 in jquery.fancybox.1.0.0.js in the same way (removing the @ and the * from the selector)

    Two more things must be fixed before it works under the current version. One:

    Change line #19 in jquery.fancybox.1.0.0.js from
    return this.each(function() {

    return $(this).each(function() {


    Last thing to do is to update line #356 (in same file) from
    return parseInt($.curCSS(el.jquery ? el[0] : el, prop, true)) || 0;
    return parseInt($(this).css(el.jquery ? el[0] : el, prop, true)) || 0;

    Those are all of the changes I made in order to get this plugin working under the newest version of jQuery.