Embedding youtube video "Refused to display document because display forbidden by X-Frame-Options"

Question

I'm trying to embed a youtube video on to my page once the user gives the link to the video.

<iframe width=\'560\' height=\'315\' src='http://www.youtube.com/watch?v=<video id>&amp;output=embed' frameborder=\'0\' allowfullscreen></iframe>

But when I try to add this I get this error. After inspecting the page in chrome, I see this error in the console tab

"Refused to display document because of the display is forbidden by X-Frame-Options"

I'm not able to see the video even in IE and Firefox also

I even tried adding the

 header('X-Frame-Options:Allow-From http://www.youtube.com'); 
 header('X-Frame-Options:GOFORIT);
 &output=embed to the url

After reading certain solutions in other posts.

But I still get the same error.

I also see that the youtube has the method of object embedding to show the video, but already youtube has made that as old method of embedding the video. So I want to use the new iframe method of embedding the video on to my page.

Problem is seen in

• Firefox 11
• Chrome 18.0
• IE 8

Anybody faced this problem?

Wilberwilberforce

Answer 1

The page you're setting as the source of the iframe (the Youtube /watch page) doesn't want to be embedded in your page. You cannot force it to let you do that.

The correct URL to embed is of the form:

https://www.youtube.com/embed/<video-id>

In your case

https://www.youtube.com/embed/oHg5SJYRHA0

Gastelum

@KNU youtube.com/v/ is the old Flash player. It's best to not use that anymore -- it won't run on mobile devices, for instance. – Gastelum

Ok In my case, I couldn't do inside the iframe, how to do in the .htaccess? – Ejection

@Keynes I think you're confused. This issue has nothing to do with .htaccess files, and cannot be solved with one. – Gastelum

Answer 2

When you copy a video link off YouTube: "https://www.youtube.com/watch?v=Fva3fgKmu3o"

• Replace 'watch' with 'embed'

• Remove '?v='

Final Example: "https://www.youtube.com/embed/Fva3fgKmu3o"

Miterwort

the best answer, I searched for days for a solution for dynamic embed with iframe and that solved it first. – Malone

Answer 3

Replace the keyword watch?v= with embed and change the live URL something like this:-

$url_string="https://www.youtube.com/watch?v=H1pTkatn6sI";
$url= str_replace('watch?v=','embed/', $url_string);

And then embed it in the iframe

<iframe id="player" type="text/html" width="640" height="390" src="{{ $url }}" frameborder="0"></iframe>

Kinkajou

Answer 4

Someone has mentioned the url should embed instead watch.

If someone looking for Javascript answer, we can fix this dynamically by using string.replace()

for example

const updateYoutubeUrl = (youtube_url = 'www.youtube.com/watch?v=H1pTkatn6sI') => {
   youtube_url.replace('watch?v=', 'embed/')
   return youtube_url
}

please refer @dhahn answer

Gomes

Answer 5

You need to copy the embed url generate from the Share section, not the ordinary url.

1. Press the Share button:

2. Press the embed button:

3. Use the url inside the iframe (or use the entire iframe):

Source: https://support.google.com/youtube/answer/171780

Modulation

Answer 6

TL;DR: You may need to delete your cookies.

---

If it still doesn't work with either /v or /embed, the issue may be on your client, because of malformatted cookies. You can also see this error because of a 400 HTTP ERROR on most or every YouTube pages.

To fix this issue you'll have to delete YouTube cookies:

In Chrome, enter chrome://settings/siteData in the address bar, and enter youtube in the Search cookies box.

Next, you will see two groups of cookies for youtube, you could remove all, OR if you click the little arrow, you will be able to see the individual cookie names, and could just delete specific ones like all the gsScrollPos-####.

Sources of this answer and more details can be found on this Reddit thread.

Hysterotomy

Answer 7

Check the official doc at Embed a video or playlist from support.google.com/youtube

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Check more tips, tricks about youtube

Hustler

Answer 8

Add this to your HTML code don't copy the exact video link but right click and copy embed code and paste in src" "

<div class="example">
 src="<iframe width="853" height="480" src="https://www.youtube.com/embed/jH0Q8NOsIR8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>" </iframe>
</div>

Stanislaw

Answer 9

To get id from youtube link this is helped me for nuxtjs

<iframe          
 :src="`https://www.youtube.com/embed/${getIdFromURL(group.videoEmbedLink)}?rel=0`"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
/>

...

methods: {
    getIdFromURL(url) {
      const youtubeRegexp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig
      let id = url.replace(youtubeRegexp, '$1')

      if (id.includes(';')) {
        const pieces = id.split(';')

        if (pieces[1].includes('%')) {
          const uriComponent = decodeURIComponent(pieces[1])
          id = `http://youtube.com${uriComponent}`.replace(youtubeRegexp, '$1')
        } else {
          id = pieces[0]
        }
      } else if (id.includes('#')) {
        id = id.split('#')[0]
      }

      return id
    }
  }

Threnode

Answer 10

if your site uses the Cross-Origin-Embedder-Policy header, you need to add 'credentialless' to your iframe element

<iframe credentialless ... >

see https://developer.chrome.com/blog/iframe-credentialless/

Christmastide

Answer 11

First, be sure that your URL contains the word embed like this link:

https://www.youtube.com/embed/EdxSS-1c-cU?si=6pejqm2Qaa4l76YD

AND NOT like this:

https://www.youtube.com/watch/EdxSS-1c-cU

You need to add the header X-Frame-Options with the value SAMEORIGIN, regarding to this documentation: https://developer.mozilla.org/es/docs/Web/HTTP/Headers/X-Frame-Options

Example:

If you are working with React you can add it to your HTTP interceptor:

  axios.interceptors.request.use((request) => {
  request.headers={'X-Frame-Options': 'SAMEORIGIN'}
  return request })

I highly recommend referring to the documentation mentioned above.

Sparks

Answer 12

just add embed instead of watch

example:-https://youtube.com/embed/OGGuw2dLBjk

Biostatics