Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Script to automatically embed latest YouTube video?

Started by Charlie, Jul 01 2011 12:53 PM

Please log in to reply

27 replies to this topic

#1 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 12:53 PM

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!

Back to top

#2 zed

not a mod

Privileged
5,738 posts

WDF Reputation

788
Excellent

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 02:36 PM

looked here? http://code.google.c...l_audience.html

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

Back to top

#3 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 02:37 PM

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;)

Back to top

#4 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 03:33 PM

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

Edited by Charlie, 01 July 2011 - 03:33 PM.

Back to top

#5 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 04:00 PM

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>

Back to top

#6 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 04:09 PM

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

Back to top

#7 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 04:14 PM

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.c...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.

Back to top

#8 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 04:18 PM

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
Posted Image

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 by Sogo7, 01 July 2011 - 05:19 PM.

Back to top

#9 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 05:14 PM

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 by Charlie, 01 July 2011 - 05:21 PM.

Back to top

#10 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 05:26 PM

http://pipes.yahoo.c...6b6200ee2077365

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 by Sogo7, 01 July 2011 - 05:48 PM.

Back to top

#11 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 06:21 PM

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.c...a62c8b020594f63

Back to top

#12 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 07:03 PM

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

Back to top

#13 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 07:06 PM

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

or sooner even...

Revised Pipe:
http://pipes.yahoo.c...fe8efa00bd86009

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...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 by Sogo7, 01 July 2011 - 07:31 PM.

Back to top

#14 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 01 July 2011 - 07:22 PM

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

Back to top

#15 Charlie

Dedicated Member

Members
159 posts

WDF Reputation

1
Neutral

Gender:Male
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 19 July 2011 - 08:48 PM

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.c...fe8efa00bd86009

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...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 by Charlie, 19 July 2011 - 08:49 PM.

Back to top

#16 Darfuria

Forum Newcomer

Members
1 posts

WDF Reputation

0
Neutral

Posted 14 August 2011 - 04:21 PM

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 by Darfuria, 14 August 2011 - 04:21 PM.

Back to top

#17 TylerCollins

Dedicated Member

Members
437 posts

WDF Reputation

25
Excellent

Gender:Male
Location:Northern Ireland
Experience:Intermediate
Area of Expertise:Web Developer

Posted 20 October 2011 - 09:54 AM

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!!

Back to top

#18 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 20 October 2011 - 06:53 PM

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...uts/ytgrab1.php

There's no way to easily document a pipe so here's a picture:
http://lovelogic.net...uts/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 by Sogo7, 20 October 2011 - 06:59 PM.

Back to top

#19 johnharrison

Forum Newcomer

Members
2 posts

WDF Reputation

0
Neutral

Posted 09 June 2012 - 05:59 PM

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

Back to top

#20 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 09 June 2012 - 08:44 PM

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.c...e0a254bd626ce9d

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.

Back to top

#21 johnharrison

Forum Newcomer

Members
2 posts

WDF Reputation

0
Neutral

Posted 09 June 2012 - 11:15 PM

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!

Back to top

#22 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 09 June 2012 - 11:38 PM

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.

Back to top

#23 lexluth012

Forum Newcomer

Members
4 posts

WDF Reputation

0
Neutral

Posted 06 November 2012 - 05:57 PM

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.

Back to top

#24 lexluth012

Forum Newcomer

Members
4 posts

WDF Reputation

0
Neutral

Posted 06 November 2012 - 07:40 PM

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 by lexluth012, 06 November 2012 - 07:45 PM.

Back to top

#25 jamesosix

Web Guru

Privileged
1,045 posts

WDF Reputation

70
Excellent

Gender:Male
Location:South Wales
Experience:Intermediate
Area of Expertise:Designer

Posted 06 November 2012 - 07:55 PM

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

Edited by jamesosix, 06 November 2012 - 07:56 PM.

Back to top

#26 Sogo7

Privileged

Privileged
584 posts

WDF Reputation

58
Excellent

Gender:Male
Location:Devils Croft
Experience:Intermediate
Area of Expertise:Designer/Coder

Posted 07 November 2012 - 12:19 AM

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.

Back to top

#27 lexluth012

Forum Newcomer

Members
4 posts

WDF Reputation

0
Neutral

Posted 07 November 2012 - 06:05 PM

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!

Back to top

#28 lexluth012

Forum Newcomer

Members
4 posts

WDF Reputation

0
Neutral

Posted 07 November 2012 - 06:47 PM

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

Back to top

Back to Server Side (PHP, Databases, ASP.NET, etc)

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

Script to automatically embed latest YouTube video?

1 user(s) are reading this topic

Sign In