laden Youtube Video in übergeordnete Seite in jquery

Question

ein YouTube-Player zu laden, benutze ich die API in JQuery wie folgt aus:

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

Und dieser Code arbeitet, ein YouTube-Player ist in der div 'media_container' erstellt .

Aber jetzt, wenn ich einen Youtube-Player von einem iframe auf der übergeordneten Seite laden will, funktioniert es nicht.

Ich denke, dass das Problem von dem Attribut "Container" in load_player kommt. Aber ich weiß nicht, wie ich das machen soll. Hast du eine Idee ?

Vielen Dank für Ihre Hilfe!

Answer 1

Nicht sicher, ob dies hilfreich ist, aber versuchen Sie es mit dem Beispiel in diesem Github repo. Es beinhaltet das Suchen und Abspielen von YouTube-Videos. Sie können dies live demo ausprobieren und mit Ihrem Projekt vergleichen.