CODEWITHSUNDEEP
javascriptvideoembed
Rishi
Rishi

Reputation: 1349

Refused to display 'http://vimeo.com/27577981' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I am trying to embed a video in embed tag But I am getting this error :

Refused to display 'http://vimeo.com/27577981' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

for youtube link : http://www.youtube.com/watch?v=zBEYR69o2Ao when i replace watch?v= with embed/ , it runs fine. But its is not necessary that video will be of youtube. So I want a unique solution for this.

Upvotes: 19

Views: 40759

Answers (4)

Maxeezy
Maxeezy

Reputation: 89

Ruby String Manipulation to get functioning links (2020.09.01) based on @Picard https://stackoverflow.com/a/27039766/12839228 and @basarat https://stackoverflow.com/a/51976196/12839228:

Youtube Example:

raw_video_link = 'https://www.youtube.com/watch?v=5qap5aO4i9A&ab_channel=ChilledCow'
video_link = 'https://www.youtube.com/embed/' + raw_video_link.split('=')[1].split('&')[0]

Vimeo Example:

raw_video_link = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'.split('/')
  insert_player_link = raw_video_link[2].split('.').unshift('player').join('.')
  raw_video_link.delete_at(2)
  raw_video_link.insert(2, insert_player_link)
  raw_video_link.insert(3, 'video')
  video_link = raw_video_link.join('/')

Feel free to refactor!

Upvotes: 1

Quentin
Quentin

Reputation: 944293

As the error message says, you can't embed that page in a frame. Vimeo provide documentation on how to embed their player. Follow that.

<html>
<head>
  <title>{page_title}</title>
</head>
<body>
  <iframe src="https://player.vimeo.com/video/{video_id}" width="{video_width}" height="{video_height}" frameborder="0" title="{video_title}" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</body>
</html>

Upvotes: 23

Picard
Picard

Reputation: 4112

I had the similiar problem
solution:
in short (at the moment) the embed url is:

//player.vimeo.com/video/

instead of:

//vimeo.com/27577981

for instance:

<iframe src="//player.vimeo.com/video/27577981?portrait=0" class="ivid" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

but as Quentin said check the vimeo documentation: http://developer.vimeo.com/player/embedding

Upvotes: 33

Adri&#225;n Deccico
Adri&#225;n Deccico

Reputation: 4995

this is happening due to the website in the iframe is setting the X-Frame-Options header to: SAMEORIGIN

The only way to make this work is to get the web-site to either not set the header or to change the value to ALLOW-FROM your-uri

This is why you need to follow the Vimeo instructions to get it working, but obviously every site has to be treated independently.

This policy is a security measure to avoid click hijacking. You can check more information here: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

Upvotes: 0

Related Questions