在jquery中的父页面中加载Youtube视频

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中的属性“container”。 但我不知道如何做到这一点。你知道吗？

非常感谢你的帮助！

Answer 1

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