javascript - 是否可以从嵌入式YouTube iframe获取元素？

Question

目前，我正在研究放大嵌入的youtube视频的可能性。因此，我在iframe中设置了一个播放器(为此我正在使用popcorn.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;
我收到以下错误消息:

Uncaught SecurityError: Blocked a frame with origin http://localhost:3000 from accessing a cross-origin frame.

This kind of error is discussed here but without helping alot with my specific problem。

看着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)();
   }
}