How to play a youtube video in an iframe? Refused to display '' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

Asked

Viewed 5,847 times

3

I’m trying to play a youtube video on my website using iframe and is generating me the error that is in the title of the question.

HTML:

 <div class="video-container">
     <iframe
        src="https://www.youtube.com/watch?v=65Iz_GKbhHk"></iframe>
  </div>

Web.Conf:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-Frame-Options" value="SAMEORIGIN" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

Obs: I added the option to the configuration file X-Frame-Options" value="SAMEORIGIN"

  • What’s wrong with it?

1 answer

5


Just open the video on Youtube and click Share, right above the description. A panel will open with the Embed option, click on it. You will be presented with an HTML code, just copy and paste it into your site. It is still possible to customize the player.

For example, for the video you passed, the generated code is this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/65Iz_GKbhHk" frameborder="0" allowfullscreen></iframe>

Why your code doesn’t work?

Youtube does not allow the whole page to be inserted in any site. It is only possible to make an iframe with the specific incorporation of the player, which is ideal.

It does this by inserting an HTTP header into the full page, the x-frame-options: SAMEORIGIN, that instructs browsers not to load the page if the requester is from a different domain. Learn more about this header on MDN. What you put on the web.conf just prohibits other sites from putting your site in an iframe.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.