Hi WDF! Wow, I haven't been here in a while, but I have to say I love the new design of this place, it's nice!

 

I'm currently creating a website for someone, and we need a way to have their latest YouTube video from their channel embedded on the website automatically. Now I'm not a developer, but could someone suggest and existing script or be kindly enough to create one for me? I've been looking all over the place and can't find one!

 

Any help would be really appreciated, thanks!

looked here? http://code.google.com/apis/youtube/2.0/developers_guide_protocol_audience.html

 

at a quick skim you can get an xml file of video details so there may be something built on that?

The YouTube API is probably a good place to start reading

as is this article from ibm. You could probably even do it using a Yahoo Pipe and javascript;)

The trouble is, a lot of these tools just pulls up the latest video link, I need the actual player embed.

Edited July 1, 201115 yr by Charlie

Quick an dirty demo using Yahoo-Pipes

this will lift the latest user video off a selected channel and embed into the page.

 

Pipe details to follow if you are interested.

 

<!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=d214eb43146c9b36c6b6200ee2077365&_render=json&_callback=cbfunc"></script>
</body>
</html>

Ooh, that looks promising, thanks! How can I change the channel associated with this script?

Ooh, that looks promising, thanks! How can I change the channel associated with this script?

The channel can be changed by altering either the default setting on the Yahoo Pipe of by ammending the javascript calling the pipe at the foot of the HTML page

 

http://pipes.yahoo.com/pipes/pipe.run?_id=d214eb43146c9b36c6b6200ee2077365&_render=json&urlinput1=http%3A%2F%2Fwww.youtube.com%2Fuser%2FOooooooooMEooooooooO%23p%2Fu

 

The text in bold is the URL for the target channel, however if you get a yahoo account you can copy my pipe and alter it to suit your needs. It's pretty easy the pipes interface is all graphical drag/drop.

that did not come out well

 

http://pipes.yahoo.com/pipes/pipe.run?_id=d214eb43146c9b36c6b6200ee2077365&_render=json&urlinput1=http%3A%2F%2Fwww.youtube.com%2Fuser%2FOooooooooMEooooooooO%23p%2Fu

 

You can overide the default setting using the urlinput1 variable, it looks messy so probably easier to just set it at the pipe

 

 

Live Demo

 

Here's the pipe screenshot as these things are awkward to explain

 

cut content from <div class="content"> to <div class="metadata">

and split that lump every time <div class="playnav-video-thumb"> appears.

 

the first block of data this returns is the top of the page and you dont want that so the sequence of data is reversed and the end bit cut off, leaving a block of code that contains the video reference number.

 

Then using regex we trim off everthing that up to and then after that refernce number and this is what the pipe sends to the webpage.

Edited July 1, 201115 yr by Sogo7

So I've got a Pipes account now, how do I 'set it at the pipe'? Thanks!

 

EDIT: Could you share the pipe shown in the above screenshot, so I can take that and edit it? Thanks so much for your help so far!

Edited July 1, 201115 yr by Charlie

http://pipes.yahoo.com/pipes/pipe.info?_id=d214eb43146c9b36c6b6200ee2077365

 

You should be able to 'clone' it now.

 

 

This basic 'scraping' or Intergration of data can of course be achieved using a server side language such as PHP where you would use the file_get_contents or cURL commands. However not all webhosts allow you to do this particualry the free web hosting providers so being able to perform the trick via javascript and the Yahoo cloud server is a workaround with many applications.

Edited July 1, 201115 yr by Sogo7

OK, so I've cloned your pipe and I put the channel in that I wanted, and for some reason instead of working awesomely like yours did it just displays 'Content for id "pump" Goes Here'. Heres the code I used to get it on the page.

 

<!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=e02b7a0d3aa2c4e5fa62c8b020594f63&_render=json&_callback=cbfunc"></script>
</body>
</html>

 

The pipe can be found at http://pipes.yahoo.com/pipes/pipe.info?_id=e02b7a0d3aa2c4e5fa62c8b020594f63

I see the problem..

 

You have run up against one of the limitations of Yahoo Pipes.

The page you are trying to retrieve is 356kb, the pipe fetch-page

module fails at anything roughly larger than the 200kb mark.

 

I'll have a rummage through my notes, failing that you may have to

use a server side script or the Youtube API to get at the data.

Will see what I can do tonight, do like a challange lol

ha got it... check back in a couple of hours

 

or sooner even...

 

Revised Pipe:

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

 

New Demo:

http://sk1.x10.mx/z-tuts/ytgrab3.html

 

 

Knew I'd seen this somewhere before...

The YouTube API can be told to generate an RSS feed from a users channel and this takes up way less kilobytes and is a format that Yahoo Pipes was designed to handle.

 

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

 

The pipe is cofigured to only return the very latest video, however the pipe does contain the file ID's for all the other twenty or so as well. So plenty of scope to do other things than just show the latest video.

Edited July 1, 201115 yr by Sogo7

Ok, again, thanks for all of your help!!

Hey Sogo, that works good, is there a way to display the Title, description and number of views on the right hand side of it? And so that the text can be styled? Thanks!

 

ha got it... check back in a couple of hours

 

or sooner even...

 

Revised Pipe:

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

 

New Demo:

http://sk1.x10.mx/z-tuts/ytgrab3.html

 

 

Knew I'd seen this somewhere before...

The YouTube API can be told to generate an RSS feed from a users channel and this takes up way less kilobytes and is a format that Yahoo Pipes was designed to handle.

 

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

 

The pipe is cofigured to only return the very latest video, however the pipe does contain the file ID's for all the other twenty or so as well. So plenty of scope to do other things than just show the latest video.

Edited July 19, 201115 yr by Charlie

Sadly I get the following error when using this code

 

Uncaught SyntaxError: Unexpected token <    - pipe.info:1

 

Any suggestions as to how I can resolve this would be wonderful.

Edited August 14, 201115 yr by Darfuria

Hey Sogo,

 

Read through the whole thread and a few of your links aren't working no longer.

 

Would you be able to update the links to active ones if possible?

 

Thanks!!

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.

Edited October 20, 201115 yr by Sogo7

Hi Sogo7

 

Thanks so much for the example you posted.

 

I literally copied the code you wrote and it worked fine for me. However, when I cloned your Yahoo Pipe, it returns null. Do you have any idea why this would happen?

 

Thanks,

John

That's odd... remember to you have to tell youtube to allow embedding by others apart from that it should work fine.

 

I've created a fresh clone for you http://pipes.yahoo.com/pipes/pipe.info?_id=dacb753dcbd3f1076e0a254bd626ce9d

 

Will watch this thread, if you have any problems let us know your Youtube ID for the RSS feed and I'll take another look.

Hey - it works! Thanks so much. I'm working on a site at the moment and your help has been invaluable... I may have a few more questions if that's okay. You're a legend!

Am a long ways of becoming a legend lol, I still have much to learn myself. The web after all is a big place with lots of different programming languages & techniques. No one person knows it all and so we pick the brains of other who specialise in particular areas.

Quick question:

 

Got the code to work, however only in Chrome. All other browsers download the files named after the titles the pipe throws out.

 

Any thoughts as to why this happens?

 

Here is the link:

 

http://yt.webatu.com/youtube.html

 

Thank you.

Hi everyone,

 

Added a fix. (well at least for the latest version of Safari) Will continue working on it, but I hope to hear your thoughts.

 

--all other browsers say "video not available"

 

Chrome, Safari working fine.

Edited November 6, 201213 yr by lexluth012

avast blocks hxxp://hosting.x10hosting.com/ for me. So, whoevers site that is could do with checking that out.

Edited November 6, 201213 yr by jamesosix

Looks OK in Firefox,

 

note: Yahoo Pipes cache the output for 30 minutes after a request,

if the playlist has updated on YouTube it will not show the new information on the pipe until after the time limit

 

avast blocks hxxp://hosting.x10hosting.com/ for me. So, whoevers site that is could do with checking that out.

 

To be honest I think they know and doubt they will ever shake off the stigma attached to them. It's bad enough trying to keep spammers out of a forum, imagine the struggle to keep the nefarious from taking advantage of free web hosting. You should of seen the public threads in the suspended accounts sub-forum some were hysterically funny.

the script works all the browsers, however I keep getting the same error on all except Chrome, "This video is currently not available"

 

The video loads, but does not play. Note that I have changed the "/user/YT_ID" in the fetch pipe section to many different accounts to test with and they all give the same error.

 

 

Hope to hear back!

Quick update:

 

Added a fix and It works cross all browsers, expect I.E.

 

Any thoughts on how to fix the issue? (no play for videos, only wants to download swf files)

 

 

http://yt.webatu.com/youtube.html