是否可以<video>从嵌入式 youtube iframe 中获取元素？

Question

目前，我正在研究放大嵌入式YouTube视频的可能性。因此，我在iframe中设置了一个播放器（我正在使用爆米花.js HTMLYoutubeElement）

player = new YT.Player( elem, { width: "100%", height: "100%", wmode: playerVars.wmode, videoId: aSrc, playerVars: playerVars, events: { 'onReady': onPlayerReady, 'onError': onPlayerError, 'onStateChange': onPlayerStateChange } });

从这个 iframe 中，我想访问 <video> 元素以实现我的目的。使用 youtube iframe API，我可以通过 player.getIframe（） 获得相应的 iframe。但是一旦我尝试获取"内部"文档，

例如

var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

我收到以下错误消息：

未捕获的安全错误：阻止具有源 http://localhost:3000 的帧访问跨源帧。

这里讨论了这种错误，但对我的特定问题没有多大帮助。

在查看youtube iframe API，我找不到任何直接访问<video>元素的可能性。因此，我的问题是：这真的可能吗？

Answer 1

即使这样

，您也无法缩放视频，因此视频质量会降低。如果您希望视频处于全屏模式，那么也许这就是您搜索的内容：

var player, iframe;
var $ = document.querySelector.bind(document);
// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
   height: '100%',
   width: '100%',
   videoId: 'xxxxxxxxxxx',
    events: {
     'onReady': onPlayerReady
    }
 });
}
// when ready, wait for clicks
function onPlayerReady(event) {
 var player = event.target;
 iframe = $('#player');
 setupListener(); 
}
function setupListener (){
  $('button').addEventListener('click', playFullscreen);
}
// when ready, wait for clicks
function onPlayerReady(event) {
    var player = event.target;
    iframe = $('#player');
    setupListener(); 
}
function setupListener (){
    $('button').addEventListener('click', playFullscreen);
}
function playFullscreen (){
   //won't work on mobile
   player.playVideo(); 
   var requestFullScreen = iframe.requestFullScreen || 
   iframe.mozRequestFullScreen || 
   iframe.webkitRequestFullScreen;
   if (requestFullScreen) {
      requestFullScreen.bind(iframe)();
   }
}