Intégration dynamique de vidéos YouTube avec jquery

Question

J'essaie de récupérer une liste des vidéos YouTube d'un utilisateur et de les intégrer dans une page en utilisant jQuery. Mon code ressemble à ceci:

$(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'); 
     }); 
    } 
    }); 
}); 

(bien sûr, 'nom d'utilisateur' étant le nom d'utilisateur réel).

Les titres vidéo s'affichent correctement mais aucune vidéo n'apparaît. Ce qui donne?

Le html cible ressemble:

<div id="top_row_center" class="video_center video"> 
    <p class="video_title"></p> 
</div> 

Answer 1

Essayez cette

Change:

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

à ceci:

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

Je pense que le code youtube est utilisé en tant que sélecteur