Question

所以基本上我有一个没有任何东西的大iframe ..然后我使用youtube api搜索新的iframe中的youtube视频。所以我想知道是否有可能将一个iframe与一个视频转移到另一个没有任何.. 这是一个小提琴，但由于某些原因，我无法看到我在自己的网站上看到的更大的玩家.. 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，你可以在小提琴中看到..

感谢任何帮助！（：

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必须是网址的最终参数，否则它也无法使用。

完整编码示例here

将iframe内容转移到新的空iframe

1 个答案: