dynamically embedding youtube videos with jquery
- by danwoods
Hello all,
I'm trying to retrieve a listing of a user's youtube videos and embed them in a page using jQuery. My code looks something like this:
$(document).ready(function() {
//some variables
var fl_obj_template = $('<object width="260" height="140">' +
'<param name="movie" value=""></param>' +
'<param name="allowFullScreen" value="true"></param>' +
'<param name="allowscriptaccess" value="always"></param>' +
'<embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="140"></embed>' +
'</object>');
var video_elm_arr = $('.video');
//hide videos until ready
$('.video').addClass('hidden');
//pull video data from youtube
$.ajax({
url: 'http://gdata.youtube.com/feeds/api/users/username/uploads?alt=json',
dataType: 'jsonp',
success: function(data) {
$.each(data.feed.entry, function(i,item){
//only take the first 7 videos
if(i > 6)
return;
//give the video element a flash object
var cur_flash_obj = fl_obj_template;
//assign title
$(video_elm_arr[i]).find('.video_title').html(item.title.$t);
//clean url
var video_url = item.media$group.media$content[0].url;
var index = video_url.indexOf("?");
if (index > 0)
video_url = video_url.substring(0, index);
//and asign it to the player's parameters
$(cur_flash_obj).find('object param[name="movie"]').attr('value', video_url);
$(cur_flash_obj).find('object embed').attr('src', video_url);
//alert(cur_flash_obj);
//insert flash object in video element
$(video_elm_arr[i]).append(cur_flash_obj);
//and show
$(video_elm_arr[i]).removeClass('hidden');
});
}
});
});
(of course with 'username' being the actual username).
The video titles appear correctly but no videos show up. What gives?
The target html looks like:
<div id="top_row_center" class="video_center video">
<p class="video_title"></p>
</div>
