CODEWITHSUNDEEP
htmliframe
Reaching-Out
Reaching-Out

Reputation: 415

youtube on iframe is not working

I tried to include the youtube in an iframe but it appears blank. This is the code I'm checking with

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.youtube.com">
<p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Why this is happening ? and what should I do to make it work ?

Upvotes: 0

Views: 2087

Answers (2)

RobIII
RobIII

Reputation: 8821

Check your console. It will most likely have a message like:

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Read more about X-Frame-Options here:

The X-Frame-Options response header

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

[...]

SAMEORIGIN

The page can only be displayed in a frame on the same origin as the page itself.

[...]

In other words [...] if you specify SAMEORIGIN, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.

Long story short: Youtube doesn't want you to embed their site (note: I'm talking about webpages here, not video's!) and explicitly set a HTTP header to communicate that to browsers.

If you want to display/embed a video use their code that is below every video under Share » Embed.

<iframe width="1280" height="720" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&amp;showinfo=0"
        frameborder="0" allowfullscreen>
</iframe>

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

<!DOCTYPE html>
<html>
<body>

<iframe allowfullscreen="true" src="http://www.youtube.com/embed/c0MZ2bTtBm0?autoplay=1&amp;autoplay=1" style="width: 100%; height: 100%; opacity: 1; display: block;" class="ms-slide-video"></iframe>

</body>
</html>

Upvotes: 0

Related Questions