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

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