Welcome to WebmasterWorld Guest from

Forum Moderators: bill & werty

Message Too Old, No Replies

Youtube API question

2:31 pm on Jul 31, 2011 (gmt 0)

New User

5+ Year Member

joined:July 31, 2011
votes: 0

I would like to show youtube videos on my website related to certain keywords. I found that this link works very good as search query feed:
[gdata.youtube.com ]
The problem is, how to display given feed results on my website? can anyone help me?
Much appreciate for any help ;)
3:50 pm on Aug 1, 2011 (gmt 0)

Preferred Member

5+ Year Member

joined:Aug 18, 2008
votes: 0

Hi there, Dadabing, and welcome to webmasterworld!

The problem is, how to display given feed results on my website? can anyone help me?

So you want to get in to youtube videos, eh? Well this is a highly open-ended thing as there are only about a zillion ways to go about this.
Because youtube allows you to specify the type of data returned in a feed query (i.e. default being atom, can request rss or json or json-in-script or jsonc using the alt parameter, see: youtube data feed reference [code.google.com]) I would recommend handling their data in json format on the client side using javascript. Reason being it's the simplest, lightest, and offloads the processing to the browser rather than handle it on the server, and allows greater dynamic abilities. Though for static displays, doing it from the server side could be handled fairly efficiently as well, depending upon requirements.

As I don't have any idea what your level of understanding of javascript or programming in general may be, I will simply throw out a working example for you to peruse and maybe you can alter to suit your needs or come back and ask more or clarify needs.
To begin, the example will use this "YTControl.js" file:

//requires addThisEvent function
//also requires swfobject, see: http://code.google.com/p/swfobject/

//you should never need more than one youtube player on a page,
//so YTControl is setup as a single object to control a single youtube player
var YTControl = {
player : null, //will be the DOM element of the player, is set by the onYouTubePlayerReady function
loaded : false,
//used to request a feed from youtube's data api, pass it a string of keywords:
request : function (keywords) {
//see the youtube data api: http://code.google.com/apis/youtube/2.0/reference.html
var script = document.createElement('script'),
url = 'http://gdata.youtube.com/feeds/api/videos?q=';
url += encodeURIComponent(keywords);
url += '&orderby=relevance&max-results=5&alt=json-in-script&callback=YTControl.receiver';
script.type = 'text/javascript';
script.src = url;
receiver : function (data) { //data will be a json object
var i, id, entry, description, thumb, click, title,
urlBase = 'http://www.youtube.com/v/',
//youtube player parameters, see: http://code.google.com/apis/youtube/player_parameters.html
urlParams = '?enablejsapi=1&playerapiid=ytplayer&version=3&playlist=',
playlist = [], //will be filled with id's of youtube videos, such as: 'PV-Kg83mW1w'
playlistHTML = [], //will be filled with thumbnail images of playlist items
feed = data.feed,
entries = feed.entry,
//the following 3 variables used by swfobject.embedSWF below
params = { allowScriptAccess: "always", bgcolor: "#cccccc" },
attributes = { id: "myytplayer" },
flashvars = {}; //or null if no flashvars needed, such as here actually
for (i = 0; i < entries.length; i++) {
entry = entries[i];
id = entry.id.$t.match(/[^\/]+$/)[0]; //the id of the video
description = entry.content.$t;
thumb = entry.media$group.media$thumbnail[1].url;
click = '" onclick="YTControl.playVideoAt('+ i +');"';
title = ' title="'+ description +'"';
playlistHTML.push('<img src="'+ thumb + click +' alt=""'+ title +'>');
if (!this.initialized) {
//see swfobject documentation: http://code.google.com/p/swfobject/wiki/documentation
urlBase + playlist[0] + urlParams + playlist.slice(1).join(','), //embedded youtube AS3 player with controls
'ytapiplayer', //id of the html element to embed the player in
'500', //width of player
'400', //height of player
'8', //minimum player version
this.initialized = true;
} else {
//youtube player javascript api: http://code.google.com/apis/youtube/js_api_reference.html
function setPlaylistImages() {
document.getElementById('playlistItems').innerHTML = '<h4>Playlist</h4>'+ playlistHTML.join('<br>');
if (this.loaded) {
} else {
addThisEvent(window, 'load', function () {
loadVideo : function (id, startSeconds) {
if (this.player) {
this.player.loadVideoById(id, Number(startSeconds) || 0);
playVideoAt : function (index) {
if (this.player) {

O.K. now place that file in the same directory as the below html file, then view this html file from server:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>youtube videos</title>
<style type="text/css">
#playlistItems h4 {
#playlistItems img {
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<!-- above script link from: http://code.google.com/p/swfobject/wiki/hosted_library -->
<script type="text/javascript" src="YTControl.js"></script>
<script type="text/javascript">

//function used for setting event listeners cross-browser.
//el may be a single html element as a DOM object, or the window object,
//type should be string name of event type ('on' prefix not required, so 'mouseover' or 'onmouseover' works fine)
//fn should be a function to set as an event handler
function addThisEvent(el, type, fn) {
var ename = type.replace(/^on/i, '');
if (el.attachEvent) { //IE
el.attachEvent('on'+ ename, function () {
return fn.call(el, window.event); //fixes IE's fudging of 'this' in attachEvent
} else if (el.addEventListener) { //Standard
el.addEventListener(ename, fn, false );
} else {
el["on"+ename] = fn;

//this function is automatically called by the youtube video player when it is ready
function onYouTubePlayerReady(playerId) {
//"myytplayer" is the id passed to swfobject in the attributes by YTControl.receiver
YTControl.player = document.getElementById("myytplayer");

//change this string below to whatever you wish to query the youtube data api for
var keywordsRequest = 'rocky mountain oysters';

addThisEvent(window, 'load', function () {
//YTControl wants it's loaded property set when the window is loaded
YTControl.loaded = this.loaded = true;

<div id="playerWrap" style="width:500px; height:400px; float:left;">
<div id="ytapiplayer">ytapiplayer div</div>
</div><!-- end playerWrap -->
<div id="playlistItems" style="height:400px; overflow:auto; float:left; margin-left:6px;"></div>
<br style="clear:both;">
<br>Dynamically load a different playlist: <button type="button" onclick="YTControl.request('jet airplanes');">Load Jet Airplanes</button>

So that's a start, could probably use some refining here and there (as well as perhaps further explanations/comments) but otherwise is a fully working example. Come on back with any questions!

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members