+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
Like Tree1Likes

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

  1. 07-02-2011 09:59 PM #1
    cybrax's Avatar
    cybrax
    cybrax is offline     x10 Elder cybrax is on a distinguished road
    Join Date
    Aug 2009
    Location
    UK
    Posts
    699

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

    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 by cybrax; 07-02-2011 at 10:02 PM.
    sargser30 likes this.
    The code must flow.
    Project 157: Latest UK Jobs direct to your mobile phone
    New Domain under construction: Lovelogic.net
    home for some new projects that we can't keep here ;)

    Reply With Quote Reply With Quote
  2. 07-02-2011 10:18 PM #2
    vv.bbcc19's Avatar
    vv.bbcc19
    vv.bbcc19 is offline     Community Advocate vv.bbcc19 is just really nice
    Join Date
    Jun 2010
    Location
    India
    Posts
    1,505

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

    Nice tut brother especially for starters.
    Others can use it as a reference.
    █ BCV | Community Support Representative
    █ x10Hosting - Giving Away Hosting Since 2004
    █ Premium Hosting | VPS Services
    Reply With Quote Reply With Quote
  3. 07-24-2011 08:11 AM #3
    maheshpro2273
    maheshpro2273 is offline     x10Hosting Member maheshpro2273 is an unknown quantity at this point
    Join Date
    Jul 2011
    Posts
    1

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

    i will try this
    and reply
    Reply With Quote Reply With Quote
  4. 07-25-2011 12:33 AM #4
    drelix7654's Avatar
    drelix7654
    drelix7654 is offline     x10Hosting Member drelix7654 is an unknown quantity at this point
    Send a message via Yahoo to drelix7654
    Join Date
    Jun 2011
    Location
    South-east
    Posts
    15

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

    Gonna try this, Thanks!
    Reply With Quote Reply With Quote
  5. 07-27-2011 02:32 AM #5
    vesiva
    vesiva is offline     x10Hosting Member vesiva is an unknown quantity at this point
    Join Date
    Mar 2010
    Posts
    20

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

    Thank you! That is very useful
    Reply With Quote Reply With Quote
  6. 09-15-2011 08:36 PM #6
    yougotskilled77
    yougotskilled77 is offline     x10Hosting Member yougotskilled77 is an unknown quantity at this point
    Join Date
    Jun 2011
    Posts
    10

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

    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
    Reply With Quote Reply With Quote
  7. 09-16-2011 01:52 AM #7
    Dead-i's Avatar
    Dead-i
    Dead-i is offline     Community Advocate Dead-i has a spectacular aura about
    Join Date
    Aug 2011
    Location
    United Kingdom
    Posts
    1,448

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

    Thanks for sharing this tutorial

    Just to let you know that http://sk1.x10.mx/ doesn't exist anymore on x10Hosting...
    Reply With Quote Reply With Quote
  8. 10-11-2011 11:47 AM #8
    thomas.s8397
    thomas.s8397 is offline     x10Hosting Member thomas.s8397 is an unknown quantity at this point
    Join Date
    Mar 2011
    Posts
    4

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

    Thank you!
    Reply With Quote Reply With Quote
  9. 10-11-2011 04:01 PM #9
    cybrax's Avatar
    cybrax
    cybrax is offline     x10 Elder cybrax is on a distinguished road
    Join Date
    Aug 2009
    Location
    UK
    Posts
    699

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

    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.
    The code must flow.
    Project 157: Latest UK Jobs direct to your mobile phone
    New Domain under construction: Lovelogic.net
    home for some new projects that we can't keep here ;)

    Reply With Quote Reply With Quote
  10. 10-13-2011 09:47 AM #10
    tinhanhvoiva46
    tinhanhvoiva46 is offline     x10Hosting Member tinhanhvoiva46 is an unknown quantity at this point
    Join Date
    Oct 2011
    Posts
    6

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

    Quote Originally Posted by cybrax View Post
    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
    Reply With Quote Reply With Quote
+ Reply to Thread
Page 1 of 2 12 LastLast
« Previous Thread | Next Thread »

Similar Threads

  1. Youtube video!
    By gptsven in forum Review My Site
    Replies: 5
    Last Post: 10-13-2011, 09:49 AM
  2. Youtube script to automatically look for a new video?
    By eternalsolitude in forum Programming Help
    Replies: 2
    Last Post: 06-27-2011, 12:08 AM
  3. User Submission Video Embed Parse HTML tags
    By sikuneh in forum Programming Help
    Replies: 2
    Last Post: 02-02-2011, 03:22 PM
  4. Anyone captured streaming video from the latest Canon or Panasonic video cameras?
    By psyinded in forum Computers & Technology
    Replies: 0
    Last Post: 03-15-2010, 04:33 AM
  5. Youtube Video Embedding
    By focus in forum Graphics & Webdesign
    Replies: 2
    Last Post: 07-21-2009, 11:20 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

x10hosting free hosting for the masses
dedicated servers