Databases
StackOverflow2013
Postsdbo
POdynamically embedding youtube videos with jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdynamically embedding youtube videos with jquery
    text
    copied!<p>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: </p> <pre><code> $(document).ready(function() { //some variables var fl_obj_template = $('&lt;object width="260" height="140"&gt;' + '&lt;param name="movie" value=""&gt;&lt;/param&gt;' + '&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;' + '&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;' + '&lt;embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="140"&gt;&lt;/embed&gt;' + '&lt;/object&gt;'); 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 &gt; 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 &gt; 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'); }); } }); }); </code></pre> <p>(of course with 'username' being the actual username). </p> <p>The video titles appear correctly but no videos show up. What gives?</p> <p>The target html looks like: </p> <pre><code>&lt;div id="top_row_center" class="video_center video"&gt; &lt;p class="video_title"&gt;&lt;/p&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload