Jump to content
Sign in to follow this  
Charlie

Script to automatically embed latest YouTube video?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by Charlie

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

ytgrab1.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Sogo7

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Sogo7

Share this post


Link to post
Share on other sites

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 by Charlie

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Sogo7

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Edited by jamesosix

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,724
    • Most Online
      4,970

    Newest Member
    lomawheels81
    Joined
  • Forum Statistics

    • Total Topics
      65,787
    • Total Posts
      454,658
×