Search code examples
jqueryhtmlcanvasyoutube

getting <video> element from embedded YouTube html5 player

I would like to distort Youtube videos using html5 canvas. I know how it works with usual videos and I need to borrow the elements from the Youtube embedded player for that. YT video embeds video with their own api. From what I can tell, do not exists before player starts. This is how I tried to get it using jQuery: 

function onPlayerStateChange(event) { 
  if (event.data == YT.PlayerState.PLAYING) { 
     var video = $('#player').contents().find('video')[0]; // '#player' is <iframe> 
     // ... anything else doesn't matter yet
  }
}

But I only get a message in console Unsafe JavaScript attempt to access frame with URL http://www.youtube.com/embed/u1zgFlCw8Aw?[... player vars] from frame with URL [domain_adress]. Domains, protocols and ports must match. I know it's happening becuase cross-domain requests with are not allowed. Maybe, are there any workarounds to do this? I don't have any more ideas yet

Solution

  • iFrames disallow access cross-domain, thus the error. The is no workaround for cross-domain iframes, besides proxying the video through your own server.