负载的Youtube视频在父页面中的jQuery

Question

要加载YouTube播放器，我使用API​​ jQuery中是这样的：

var youtube_player = document.createElement("div"); 
    youtube_player.id = "youtube_player"; 
    youtube_player.className = "youtube_player"; 

    document.getElementById('media_container').appendChild(youtube_player); 

    var player = { 
     playVideo: function (container, videoId) { 
      if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') { 
       window.onYouTubeIframeAPIReady = function() { 
        player.loadPlayer(container, videoId); 
       }; 

       $.getScript('//www.youtube.com/iframe_api'); 
      } else { 
       player.loadPlayer(container, videoId); 
      } 
     }, 
     loadPlayer: function (container, videoId) { 
      new YT.Player(container, { 
       videoId: videoId, 
       width: 356, 
       height: 200, 
       playerVars: { 
        autoplay: 1, 
        controls: 1, 
        modestbranding: 0, 
        rel: 0, 
        showInfo: 0 
       } 
      }); 
     } 
    }; 

    var id_youtube = get_id_youtube_by_url(url_media); 

    player.playVideo(youtube_player.id, id_youtube); 

而这个代码工作，一个YouTube播放器在div“media_container”创建。

但是现在，如果我想要从父页面的iframe加载YouTube播放器，它不起作用。

我认为问题来自load_player中的属性“容器”。 但我不知道如何做到这一点。你有什么想法吗？

非常感谢您的帮助！

Answer 1

不确定这是否有帮助，但请尝试使用此Github repo中的示例。它包括搜索和播放YouTube视频。您可以试试live demo并与您的项目进行比较。