Youtube Channel Embedded in website from RSS with Videos playing in a Pop Up Window

One of our clients Andreas Lundin, http://www.andreaslundin.com/ wanted to have his video showreel online.

When we first created the website we converted the videos to Flash and embedded them in a Flash Video Player.

We found that this method was not all that effective for users.

The videos were very slow to load and the file size of up to 30mb a video was causing huge problems for the mail server.

The client had created a YouTube Channel of the videos already and it was decided that we would instead embed the YouTube videos dynamically into the site.

http://www.andreaslundin.com/video-gallery/index.shtml

Youtube has a data API which we looked at, but after doing some web searching we discovered we could covert the YouTube feed into an easy to use RSS feed.

For this we used a site called RssHandler

http://www.rsshandler.com/converter

So the client's channel which was:

http://www.youtube.com/andreaslundindotcom/

became a feed:

http://www.rsshandler.com/flvrss.rss?feedurl=http%3A%2F%2Fwww.youtube.com%2Frss%2Fuser%2Fandreaslundindotcom%2Fvideos.rss

Which also allowed us to link to a MP4 file for downloading to an iPod which we will do at a later date.

The RSS feed contains all the data between the

We did have to use a regular expression to get the actual ID of the video as it was embedded in the link to the page.


The PERL code to grab the RSS feed and use XML Simple to parse the feed is below.


|;



use LWP::Simple;

use XML::Simple;

use encoding 'UTF-8', STDOUT => 'cp932';



my $url = "http://www.rsshandler.com/flvrss.rss?feedurl=http%3A%2F%2Fwww.youtube.com%2Frss%2Fuser%2Fandreaslundindotcom%2Fvideos.rss";

my $rssData = get($url);

my $xml = XMLin($rssData);





foreach my $item (@{$xml->{channel}->{item}})

{

($bits,$image) =split(/\=/,$item->{link});

print qq|

<td>

<strong>$item->{title}</strong><br>

<a href="/cgi-bin/main.cgi?display_video=$image" rel="gb_page_center[660, 405]"><img src="http://i4.ytimg.com/vi/$image/0.jpg" border="0" vspace="4" hspace="4" border="0" alt="$item->{title} $mpc[0]" /></a>

</td>

|;



}

print qq~

</tr>

</table>


Div POP Up Window

We then used Grey Box to open a new window in a div and display the video passing the video ID through the script.

The actual display of the video is pretty simple, we just used the normal YouTube embed code and parsed in our only variable.


<object width= "660" height= "405" ><param name= "movie" value= "http://www.youtube.com/v/cL9eqzqK7xI&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999&border=1" ></param><param name= "allowFullScreen" value= "true"></param><param name= "allowscriptaccess"  value="always"></param><embed src="http://www.youtube.com/v/$in{'display_video'}&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="405"></embed></object>

We also used another Marquee script for moving the images side to side on the page from http://www.dynamicdrive.com/forums/ which we have used for the Image Galleries on the page.

We could have styled the feed in all manner of ways really.

YouTube Thumbnails

We found that YouTube creates a couple of different versions of the thumbnails for the video:

There are four thmbnails we found that use the following structure:

http://i4.ytimg.com/vi/$image/0.jpg

where $image is the ID of the video

0 - is the largest thumbnail at 320 x 240 pixels
1, 2, 3 are different screen grabs as is default: