Is it possible to get the element from a embedded youtube iframe?

Question

Currently I´m working on the possibility to zoom into a embedded youtube video. Therefore I have a player set up in a iframe (I am using the popcorn.js HTMLYoutubeElement for this)

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

From this iframe I would like to get access to the <video> element for my purposes. Using the youtube iframe API I get the appropriate iframe with player.getIframe(). But as soon as I try to get the "inner" document with e.g

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

I receive the following error message:

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.

And looking into the youtube iframe API I couldn´t find any possibility to directly access the <video> element. Therefore my question: is it actually possible at all?

Answer 1

You can't zoom a video even so the video quality will be degraded . if you want the video in fullscreen mode then maybe this is what you searched for :

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