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="http://www.youtube.com/watch?v=rP-2ksWFk4o">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. I crack myself up...)
December 22nd, 2008 - 23:26
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.
Regards
Pat
March 2nd, 2009 - 09:39
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?…is your script for videos only?
thanks
March 2nd, 2009 - 16:03
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.
March 21st, 2009 - 07:05
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.
March 27th, 2009 - 18:13
chadly,
You are the MAN. I really like this. It is exactly what I was looking for. Thank you for making such a great script.
April 3rd, 2009 - 16:20
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
April 3rd, 2009 - 23:26
Thanks for making this script!!!!!!
May 23rd, 2009 - 23:22
Any plans on updating this for the latest versions of jquery/fancybox??? That would be great.
June 4th, 2009 - 06:13
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
June 21st, 2009 - 22:07
Nice work!
BTW. I”ve recently updated <a href="http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup">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();
to
var arr = $("a[rel=" + el.rel + "]").get();
Also, I suggest you change your script to use the <a href="http://jquery.thewikies.com/swfobject/">jquery.swfobject.js</a> jQuery plugin asI have since it”s much smaller than the full swfobject.js.
June 21st, 2009 - 22:11
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();
to
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.
June 26th, 2009 - 10:57
The close button doesn”t work in IE
August 4th, 2009 - 15:27
I”m getting:
uncaught exception: Syntax error, unrecognized expression: [@rel*=fancyvideo]
Any idea why?
August 4th, 2009 - 19:13
For jQuery >= 1.3.2, change it to $("a[rel=fancyvideo]")
August 6th, 2009 - 20:48
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 http://easygifts123.net/wordpress/?p=5
August 7th, 2009 - 03:39
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.
August 7th, 2009 - 06:32
Hey Chadly I just added the [quote]<script type="text/javascript">
$(document).ready(function() {
……….[/quote]
On the header file still no luck !!! I can”t tell, how badly I want this to be running .
August 27th, 2009 - 00:07
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?
Cheers
September 1st, 2009 - 12:57
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?
Thanks
September 26th, 2009 - 00:31
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…
http://www.wearingfilm.com/about/
September 27th, 2009 - 17:55
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.
November 11th, 2009 - 14:58
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
http://www.smoothstar.com.au/grommet-surfboard-skateboard.html
Would this problem be with new resolution changes on youtube that IE doesn”t like?
You comments would be most appreciated.
December 7th, 2009 - 15:22
This is awesome. Thanks!
December 14th, 2009 - 07:26
Hello
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:)
Regards
December 30th, 2009 - 20:23
Hey,
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() {
$("a[@rel*=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360
});
});
</script>
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.
December 30th, 2009 - 20:56
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.
January 18th, 2010 - 02:05
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 http://www.redgreyconcepts.com , 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!
July 14th, 2011 - 21:20
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!
September 22nd, 2011 - 14:45
THAaaaaaaaaank YOUuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
October 16th, 2011 - 22:26
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.
Cheers,
Brad
October 16th, 2011 - 22:40
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!
January 8th, 2012 - 18:37
How did you fix this for Jquery 1.4.4? Any advice would be appreciated.
Thank you!
October 19th, 2011 - 12:04
quiero agradecerte el enorme favor….esta excelente…y se ve bien….me salvaste…..fabuloso felicitaciones!!!!!!
November 1st, 2011 - 20:05
Thank you! It works great!!
November 3rd, 2011 - 07:48
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!
December 1st, 2011 - 13:47
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!!
December 19th, 2011 - 12:38
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 vikasdevde@gmail.com ……….as i will not come to know if you reply me here. so plz help..i really need help
December 30th, 2011 - 14:55
Hi. Nice script! Thanks a lot.
Vondering, how I make it auto play?
January 6th, 2012 - 18:55
I can”t get it work. Clicking makes the screen darker but then the browser goes to youtube.com instead of opening a light box.
January 9th, 2012 - 13:51
little help. i have the light box working, but the video isn”t displaying…
IE8:
“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.”
FIREFOX & CHROME:
Blank Lightbox.