javascript - 将 iframe 内容传输到新的空 iframe

Question

所以基本上我得到了一个大 iframe，里面没有任何东西..然后我使用 youtube api 来搜索新 iframe 中的 youtube 视频。所以我想知道是否可以将一个带有视频的 iframe 传输到另一个没有任何内容的 iframe。这是一个 fiddle ，但由于某种原因，我看不到我可以在自己的网站上看到的更大的播放器。 https://jsfiddle.net/74wfou72/4/

<div id ="player">  </div>
<iframe  class = "videon" height = "80" width = "120" frameborder = "0" 
     src ="//www.youtube.com/embed/bHQqvYy5KYo" showinfo = 0 controls=0 ></iframe>

播放器上也有一些java，你可以在 fiddle 中看到..

感谢您的帮助! (:

Answer 1

您可以向按钮添加事件监听器，该按钮将从较小的 iFrame 中提取 ID，然后使用 YouTube API 创建较大的 iFrame。

示例:

document.querySelector('#play').addEventListener('click', function() {
    var id = document.querySelector('.videon').getAttribute('src').split('/');
    id = id[id.length - 1];
    play(id);
});

var apiReady = false;
var player;

function onYouTubeIframeAPIReady() {
    apiReady = true;
}

function play(id) {
    if(apiReady) {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: id,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
}

如果 API 尚未加载，apiReady 将为 false，并且不会创建 YouTube 播放器。如果您想向用户提供反馈，您可以为该场景添加错误。

YouTube 视频的 ID 必须是 URL 的最后一个参数，否则也不起作用。

完整编码示例 here