- Messages
- 764
- Reaction score
- 27
- Points
- 0
How To: Automatically Embed Latest Video from a YouTube channel on your site
Normally this kind of trick is the sole preserve of those with professional hosting that allows server side scripts to query an external URL. However thanks to the YouTube API and Yahoo with its Pipes service anybody whose site can run javascript can do this.
Step One:
Get the RSS feed for the channel you are interested in. For this example the user is 'fearofmobs'. Other sections of the site may also have RSS feeds that can be used.
Step Two:
Put the RSS feed into a Yahoo Pipe. There's no easy way to document the code for these so here is one you can 'clone'. All you need to use Pipes is a Yahoo ID and it's a free service. This extracts the file ID for every video entry in the RSS feed, but only spits out the latest one in JSON fromat. Once you have cloned the pipe to your own account you can alter it.
Step Three:
A brilliant double act .. Javascript and JSON together putting the file ID into the embed tags of your site. For those wondering why the javascript calling the Pipe is the last element of the page body this is because pipes can take half a second to run, so this way a visitor would see the rest of the page appear whilst waiting for the video.
Live Demo
Hope you all like it and enjoy.
Normally this kind of trick is the sole preserve of those with professional hosting that allows server side scripts to query an external URL. However thanks to the YouTube API and Yahoo with its Pipes service anybody whose site can run javascript can do this.
Step One:
Get the RSS feed for the channel you are interested in. For this example the user is 'fearofmobs'. Other sections of the site may also have RSS feeds that can be used.
Code:
http://gdata.youtube.com/feeds/api/users/fearofmobs/uploads?orderby=updatedStep Two:
Put the RSS feed into a Yahoo Pipe. There's no easy way to document the code for these so here is one you can 'clone'. All you need to use Pipes is a Yahoo ID and it's a free service. This extracts the file ID for every video entry in the RSS feed, but only spits out the latest one in JSON fromat. Once you have cloned the pipe to your own account you can alter it.
Code:
http://pipes.yahoo.com/pipes/pipe.info?_id=19431b877cc39a2d5fe8efa00bd86009Step Three:
A brilliant double act .. Javascript and JSON together putting the file ID into the embed tags of your site. For those wondering why the javascript calling the Pipe is the last element of the page body this is because pipes can take half a second to run, so this way a visitor would see the rest of the page appear whilst waiting for the video.
Live Demo
Hope you all like it and enjoy.
Code:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function cbfunc(data){
var videoRef = (data.value.items[0].content);
var frame = '<iframe class=\"embeddedvideo\" src=\"http://www.youtube-nocookie.com/v/'+videoRef+'?version=3&hl=en_GB&rel=0\" type=\"application/x-shockwave-flash\" width=\"560\" height=\"349\">
</iframe>';
var curtextval = document.getElementById("pump");
curtextval.innerHTML = (frame); }
</script>
</head>
<body>
<div id="pump">Content for id "pump" Goes Here</div> <script src="http://pipes.yahoo.com/pipes/pipe.run?_id=19431b877cc39a2d5fe8efa00bd86009&_render=json&_callback=cbfunc"></script>
</body>
</html>
Last edited:
