Creating a YouTube Gallery using jQuery Fancybox
Today I’ve created a gallery of YouTube videos and I’m displaying them using the awesome jQuery Fancybox. It is similar to the popular LightBox2, but I like Fancybox because of it’s look ‘n’ feel and lightness. Download the source and we’ll go through it.
I’ve created a really simple PHP script called video-req.php that grabs the video ID from the gallery and plays it in the YouTube player.
video-req.php
<?php $vid = $_GET['video']; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Playing dynamic YouTube videos with jQuery FancyBox</title> <script type="text/javascript" src="scripts/swfobject.js"></script> </head> <body> <div id="videoplayer"> </div> <script type="text/javascript" language="javascript"> var so = new SWFObject("http://www.youtube.com/v/<?php echo $vid ?>&enablejsapi=1&playerapiid=ytplayer", "mymovie", "425", "356", "8", "#ffffff"); so.addParam("menu", "false"); so.write("videoplayer"); </script> </body> </html>
In index.php you’ll see in our grid we are loading the thumbnails from YouTube’s server and we are loading the videos with this link: video-req.php?video=5W2B2mAocDc. The video-req.php is a page that gets loaded as an iframe into Fancybox and pulls in the video ID from the $_GET[video] param and passes it into the YouTube player. This is great for displaying your videos from your YouTube channel. Whenever you need to add more videos to your page, you just copy the link and thumbnail and just change the video ID.
Enjoy.
Aaron this is a great script…excellent work dude.
Comment by Windies Online — November 13, 2009 @ 7:07 am