How To: Automatically Embed Latest Video from a YouTube channel on your site

cybrax

Community Advocate
Community Support
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.

Code:
http://gdata.youtube.com/feeds/api/users/fearofmobs/uploads?orderby=updated

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.

Code:
http://pipes.yahoo.com/pipes/pipe.info?_id=19431b877cc39a2d5fe8efa00bd86009

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.

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:

vv.bbcc19

Community Advocate
Community Support
Messages
1,524
Reaction score
92
Points
48
Nice tut brother especially for starters.
Others can use it as a reference.
 

yougotskilled77

New Member
Messages
10
Reaction score
0
Points
0
wait what do i put at "content for id pump goes here"?

---------- Post added at 01:36 AM ---------- Previous post was at 12:07 AM ----------

Sereously....when i load the page all it says is Content for id "pump" Goes Here
 

cybrax

Community Advocate
Community Support
Messages
764
Reaction score
27
Points
0
The Yahoo Pipe template and live demo are offline while we move things to the new domain over at Lovelogic.net and rewrite parts of the code to make life easier for some folk. Plus we'll be putting up a few other Youtube API script snippets to play around with.
 

tinhanhvoiva46

New Member
Messages
6
Reaction score
0
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.

Code:
http://gdata.youtube.com/feeds/api/users/fearofmobs/uploads?orderby=updated

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.

Code:
http://pipes.yahoo.com/pipes/pipe.info?_id=19431b877cc39a2d5fe8efa00bd86009

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.

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>

oh verry good, verry nice
 

cybrax

Community Advocate
Community Support
Messages
764
Reaction score
27
Points
0
Bear with me I'm moving a lot of snippets and micro tuts from around the web to a single domain.

Bare bones demo:
http://lovelogic.net/z_tuts/ytgrab1.php

There's no way to easily document a pipe so here's a picture:
http://lovelogic.net/z_tuts/ytgrab2.php


PS: please do create your own Yahoo Pipe, it's not that hard and will give you a more reliable service as the example one occasional exceeds resource limits.
 

BadgeSWS

New Member
Messages
1
Reaction score
0
Points
1
Hi cybrax when I make my pipe it was exactly like yours except it always returns null.
 
Top