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.)

Solution 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.

Solution 2

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

Solution 3

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.