以编程方式添加JS Youtube API视频

时间:2013-08-10 14:05:51

标签: jquery youtube-api

我想做点什么:

// create youtube player
var player = new YT.Player('player', {
  height: '390',
  width: '640',
  videoId: '0Bmhjf0rKe8'
});

var newVideo = $('<div></div>').html(player);
$('body').append(newVideo)

如何以编程方式添加YouTube视频元素?

1 个答案:

答案 0 :(得分:1)

YT.Player函数为其第一个参数获取创建播放器对象的元素的ID;因此,在您的代码中,由于您尚未创建元素,因此无法创建iframe或注入的播放器代码。但是,如果您反转订单,并以编程方式创建一个ID,它应该可以正常工作。你还想在onYouTubeIframeAPIReady()回调函数中创建你的玩家,因为当加载javascript API时你会自动调用它(你可以在这一个函数中创建多个玩家):

      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 for player2, etc.
      }

如果您以后创建新的YouTube播放器实例(当您确定API库已经存在时),例如响应事件,则不必将其包装在回调函数中(并且当然你不必加载javascript本身),但是在调用YT.Player()之前,仍然需要在DOM中存在iframe的元素。