Embedding Youtube video using iframe gives "Unsafe JavaScript attempt ... "

Question

I'm trying to embed a YouTube video with this code:

<iframe width="425" height="319" frameborder="0" wmode="Opaque"allowfullscreen=""
      src="http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent">
</iframe>

and although it is working fine, but it gives this error in the console:

Chrome version 22.0.1229.94:

Unsafe JavaScript attempt to access frame with URL http://example.com/
from frame with URL http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent.
Domains, protocols and ports must match.

Firefox version 17.0:

Error: Permission denied to access property 'toString'

I searched around but I found that it is probably a YouTube issue and they should solve it,

The question is: how can I get rid of this error? (by any means, even by suppressing it.)

Cession

This is a bit of a guess so I'm not going to post it as an answer but I suspect that a script in the youtube content is trying to look at the parameters of the iframe to get parameters like wmode and allowfullscreen. Your browser sees it, correctly, as a cross site scripting attempt which is not allowed for security reasons. If you embed all the parameters required by youtube in the URL query string instead then you might prevent it from doing this. – Graver

Also couldn't help but notice that you have wmode=opaque in the iframe and wmode=transparent in the URL. – Graver

I read many opinions of why this is happening, and many say that it is because the loaded Youtube APIs inside the iframe tries to access a parent element which against security standards, and it is already reported as a bug, but what I'm more concerned in here, is how to stop this error from appearing in the console, and not just waiting Youtube developers to solve it. And concerning the wmode, I didn't noticed it :) , thanks – Cession

My suggested (guessed at) solution is in the last line of my comment - embed all the parameters required by youtube in the URL query string - it has to be worth a try. – Graver

I tried it, but still have the error – Cession

Yes I just tried it too... But I found this answer which might help you https://mcmap.net/q/1009435/-youtube-embed-unsafe-javascript-attempt-to-access-frame. I never noticed this error before - now it's really bugging me to know that this error is coming up in the console! – Graver

I didn't tried the "IFrame Player API" yet but I read form others who tried it with no difference, but I tried the &origin and it didn't work either :( – Cession

Answer 1

You can’t stop it, at least not in any way I know (and I have tried a lot). There is a script in the iframe destination that tries to access your document, probably looking for global functions it can call to enable the API.

Another thing is that the error persists even when using their own iframe API: http://jsbin.com/izabed/1/edit

There is no harm in this, your video will work fine. But it looks kind of bold if you run it in a console. They should probably include this as a parameter, and at first I thought that this was the idea of the origin parameter, but it doesn’t make any difference.

It’s also worth noting that their own demo displays the same error (and others). Also, if you use the embed tag instead of iframe, it wont display any errors.

So you could do something like this to prevent the error in most desktop browsers:

if(haveflash) {
    // use <embed>
} else {
    // use iframe
}

Update

Most browsers no longer support flash, nor does Adobe. Unfortunately, this means that using <embed> is no longer a viable option.

Brunn

Thanks David, I know it is not a direct answer to the question but after searching a lot for alternatives I get many findings and you summed them up in your answer giving the most fit solution so far – Cession

+1 for the line "You can’t stop it".This is absolutely direct answer instead of writing about Cross domain security etc – Caddaric

Answer 2

Moving the discussion from comments to this answer. In-short, the problem is that cross domain JS object access is not allowed, which in your case, a script at youtube.com is trying to do to the parent page.

If you only want to show the youtube video, you can use <embed> tag instead.

Adapa

thanks for this, I know it will work, but the problem with changing to <embed> in my case is: 1- the code I'm working on is coupled with other areas and needs more time to refactor (which I don't have now) , 2- and the most important thing that we still need to use the Iframe API to support non-flash browsers – Cession

Answer 3

Just add ?html5=1 to prevent this error. (Swich to HTML5 player)

Gingham

Answer 4

What browser is it ? When I try to append an iframe using JavaScript in Firefox in this page, the error/warning does not appear.

Adapa

chrome & firefox, and it is not a general iframe problem, it has something to do with the Youtube page loaded within the iframe, try the Youtube iframe & it will give you the error – Cession

The src of the iframe I appended is the same as in your example. Moreover, iframes are allowed to be of different domains. Can you try this piece of code : var iframe = document.createElement('iframe'); iframe.setAttribute('src' , 'http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent'); document.body.appendChild(iframe); and see if the error still comes ? – Adapa

yes, it still comes out in the console of both firefox & chrome, even when putting the code in an empty html page containing only this code or only the question's iframe – Cession

by the way, I havn't written the firefox's error before because it wasn't clear enough like the chrome's error, the firefox one is: "Error: Permission denied to access property 'toString'" – Cession

Actually what is happening is that one of the scripts from that youtube page is trying to access the parent's javascript objets, and that is not allowed between parent-iframe of different domains. Only same domain iframe can access parent's JS objects. Your video will work, since that is only flash, but other scripts in that youtube page are trying to access parent's JS objects which is giving error. – Adapa

thanks for you declarations, but I'm more concerned now in how to stop this error from appearing in the console, even by swallowing it, I have tried to catched it but couldn't ? – Cession

Why are you trying to do it via iframe, and not an <embed> tag ? – Adapa

Answer 5

Why use Javascript when you can only use CSS? It works every.single.time. You can even incorporate any video in a responsive slider.

OR just visit: http://embedresponsively.com/

<style>
.embed-container 
{ 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
</style>

<div class='embed-container'>

<iframe src='https://www.youtube.com/watch?v=tntOCGkgt98' frameborder='0' allowfullscreen>
</iframe>
</div>

Zebulon

Thx for the tip, but how it is even related to the question!! :) – Cession

I didn't use a javascript for loading the video in the first place, I just used the iframe, just like you, but the error shows up from the code loaded inside the iframe, not mine – Cession