Looking for jQuery or PHP script that loads a specific youtube users videos into <ul> [Archive]

View Full Version : Looking for jQuery or PHP script that loads a specific youtube users videos into <ul>

RipzCurlz

08-04-2010, 05:13 AM

Hey,

A client has requested that their videos page content is their youtube user's videos and for them to be loaded in automatically so that their latest upload is always the first video on the page.

I have been searching for a way to do this and haven't much.

However i did find this script:

$(function() {
$.getJSON('http://gdata.youtube.com/feeds/users/[USERNAME]/uploads?alt=json-in-script&callback=?&max-results=10', function(data) {
$.each(data.feed.entry, function(i, item) {
var title = item['title']['$t'];
var video = item['id']['$t'];
video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/watch?v=');
$('#youtube').append('<a href="'+video+'">'+title+'</a> <br/>');
});
});
});

This code gives me the right data i need.
A specific youtube user's videos title and url.

What I want to achieve, is to load this data into a <ul>

Example:

<ul id="videolist">
<li class="videos">
<p class="videoTitle">Video Title</p>
<div class="videoURL">Embedded Youtube video</div>
</li>
<li class="videos">
<p class="videoTitle">Video Title</p>
<div class="videoURL">Embedded Youtube video</div>
</li>
</ul>

Any suggestions or help are very much appreciated.

Thanks

Beverleyh

08-04-2010, 01:21 PM

Assuming you mean this code snippet: http://snipplr.com/view.php?codeview&id=26192

This should do what you want;

<!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" xml:lang="en" lang="en">
<head>
<title>jquery+json+youtube api test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">$(function() {
$.getJSON('http://gdata.youtube.com/feeds/users/fristopher/uploads?alt=json-in-script&callback=?&max-results=10', function(data) {
$.each(data.feed.entry, function(i, item) {
var title = item['title']['$t'];
var video = item['id']['$t'];
video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/v/');
$('#youtube').append('<li class="videos"><p class="videoTitle">' +title+ '</p><div class="videoURL"><object width="480" height="385"><param name="movie" value="'+video+'&hl=en_GB&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+video+'&hl=en_GB&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></div></li>');
});
});
});
</script>

</head>

<body>

<ul id="videolist">
<div id="youtube"></div>
</ul>

</body>
</html>

RipzCurlz

08-05-2010, 11:47 PM

This worked Great!

The time and effort you put into helping me with this is very very much appreciated.

Thanks!!

Beverleyh

08-06-2010, 07:10 AM

no problem RipzCurlz - glad to help