Parsing a YouTube feed is very simple with jQuery. Since we're dealing with a remote resource, the first thing we need to do is to set up a server-side script that will fetch the feed for us. In this case we 're using the Most Viewed feed taken directly from the YouTube's home page (just follow the feed links that are linked from this page). However, there's a catch: this kind of feed mix up XML elements and HTML markup, so we need also to separate these two components. The server-side script, written in PHP, is the following:
header('Content-Type: text/html');
$youtube_rss = simplexml_load_file('http://gdata.youtube.com/feeds/base/standardfeeds/most_viewed?client=ytapi-youtube-index&time=today&v=2');
foreach($youtube_rss->entry as $entry) {
echo '<div class="entry">' . $entry->content . '</div>' . "\n";
}
This script uses SimpleXML to fetch and parse the feed, returning a set of HTML elements containing the actual contents of the feed. Note that we're also serving our file as HTML. After this, the jQuery code is really straightforward to implement:
$(document).ready(function() {
var htmlFeed = '';
$.ajax({
type: 'GET',
url: 'youtube-feed.php',
dataType: 'html',
success: function(html) {
htmlFeed = html;
$(htmlFeed).appendTo('#youtube-feed');
}
});
We simply append the returned markup to our placeholder.