Embedding Youtube video http / https matching error

5
votes

I am embedding a Youtube video on my website like so:

<iframe class="frame-for-top" width="300" height="200" src="https://www.youtube.com/embed/nb9GMm7QtlM" frameborder="0" allowfullscreen></iframe>

Now when I open up my console I get an error message for all of my embedded youtube videos that says:

:1 Uncaught SecurityError: Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://mywebsite.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

I tried changing the "src" in the iframe to http instead of https seems to work but I don't know if that's ok to do. Any feedback?

UPDATE:

still getting the errors even in the JS fiddle; enter image description here

2
javascripthtmlvideoyoutube
I'm unable to reproduce the error message using your iframe link: jsfiddle.net/poppin3000/m12j3wub . Can you share the surrounding code? – Pavan Ravipati

2 Answers

4
votes

You need to add an origin parameter to your src url and then you can use http protocol in your iframe:

As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme (http:// or https://) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.

Example:

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/watch?v=nb9GMm7QtlM?origin=http://mywebsite.com"
  frameborder="0"></iframe>
0
votes

You have to use:

src="https://www.youtube.com/embed/videoID"

It worked for me.