jquery - Adding JS Youtube API videos programmatically -

i'd like:

// create youtube player var player = new yt.player('player', {   height: '390',   width: '640',   videoid: '0bmhjf0rke8' });  var newvideo = $('<div></div>').html(player); $('body').append(newvideo) 

how can add youtube video elements programmatically?

the yt.player function takes first argument id of element creating player object; hence, in code, since haven't created element yet, can't create iframe or injected player code. if reverse order, though, , give programmatically created id, should work. you'll want put creation of players in onyoutubeiframeapiready() callback function, since automatically called when javascript api loaded (you can put creation of multiple players in 1 function):

      var tag = document.createelement('script');       tag.src = "https://www.youtube.com/iframe_api";       var firstscripttag = document.getelementsbytagname('script')[0];       firstscripttag.parentnode.insertbefore(tag, firstscripttag);       $('body').append("<div id='player1'></div><div id='player2'></div>");       function onyoutubeiframeapiready() {         player = new yt.player('player1', {           height: '390',           width: '640',           videoid: '0bmhjf0rke8'          }); // repeat player2, etc.       } 

if creating new youtube player instances later (when you're sure api library present) such in response event, won't have wrapped in callback function (and of course won't have load javascript itself), element iframe created still need exist in dom before calling yt.player().