javascript - Embedding Youtube video httphttps matching error - Stack Overflow

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

<iframe class="frame-for-top" width="300" height="200" src="" 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 "" from accessing a frame with origin "". 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;

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

<iframe class="frame-for-top" width="300" height="200" src="https://www.youtube./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." from accessing a frame with origin "http://mywebsite.". 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;

• javascript
• html
• video
• youtube

Share Improve this question Follow edited Jul 16, 2015 at 0:09 Lucas Santos asked Jul 15, 2015 at 23:11 Lucas SantosLucas Santos 1,36944 gold badges2626 silver badges4343 bronze badges 1

• I'm unable to reproduce the error message using your iframe link: jsfiddle/poppin3000/m12j3wub . Can you share the surrounding code? – Pavan Ravipati Commented Jul 15, 2015 at 23:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./watch?v=nb9GMm7QtlM?origin=http://mywebsite."
  frameborder="0"></iframe>

You have to use:

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

It worked for me.