加载Youtube视频在父页面在jquery

Question

要加载youtube播放器，我使用Jquery中的API如下:

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

这段代码是工作的，在div 'media_container'中创建了一个youtube播放器。

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

我认为问题来自属性"容器"在load_player。但我不知道怎么做。你知道吗?

谢谢你的帮助

Answer 1

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