YouTube embeds "video unavailable" — works fine on localhost

Hey everyone,

I’m having an issue with YouTube embeds on my Netlify site. I’ve done some research into this and I think the problem might be to do with the referrer policy enforced by Netlify but I don’t know enough about this to be able to fix the problem.

When I visit the site, I get a “video unavailable” on all embeds. I’ve confirmed that these are allowed to be embedded, and besides they previously worked fine a few months ago but the client I built the site for is now reporting that they’ve stopped working.

(scroll about half way down)

I use Sanity to manage the content and the same embedded video in the Sanity Studio plays fine. It’s only on the actual, Netlify hosted, site where it won’t play.

Here’s a screenshot of my localhost working fine:

From the research I’ve done it looks like YouTube require a less strict referral policy such as “no-referrer-when-downgrade”.

Any suggestions?

Another Stack Overflow post (javascript - Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000 - Stack Overflow) mentions HTTP vs HTTPS, but it appears you are using HTTPS for the YouTube embed, so I doubt this is the issue.

Another post (javascript - Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null') - Stack Overflow) mentions ensuring the page has completed loaded, though not specifically about YouTube.

If it is a header that is required, you can set custom headers for the whole site, or specific pages.

If they were working and now aren’t, perhaps YouTube have changed something on their end that is stopping things working as before.

This is a bit of a strange one, it seems. Whenever I embed the file using Netlify Dev (so a local emulation of the Netlify platform) I get the same error. When I run my site without Dev, it works ok. I tested a couple of other random videos. Some work, others don’t. No errors in console, no blocking plugins etc.

Glad you were able to recreate it and it’s not just me, but where does that leave us?

Anyone have any ideas?

Unfortunately not @chrish

Unlike @tomrutgers I haven’t had any success recreating the issue locally. :thinking:

Shoot! I’m getting some heat from the client about it but really drawing a blank on how to fix it…! @coelmay

Weirder still, on this page one of the videos loads but the other doesn’t:

but the same video loads fine in Sanity CMS

I think you can have more luck by posting it on some other forums too like StackOverflow or Google’s forums. If some of them are able to point this out to an issue from Netlify end, we can find a solution for that, because at this stage, it’s producing mixed results for everyone, thus hard to debug.

1 Like

Thanks for the response @hrishikesh — I’ll try posting this on Stack Overflow like you suggest (I’ll edit this post and link it here when I do).

It’s worth pointing out that I tried deploying this website to Gatsby Cloud, and the same page loaded on their platform doesn’t suffer this issue (it’s deploying the exact same branch).

You can compare the two here:

https://dscvrdmain.gatsbyjs.io/noise/frank-carter-and-the-rattlesnakes-open-up-about-new-record-sticky

This suggests to me it’s definitely a problem with Netlify’s servers/headers, but I haven’t a clue what!

As @coelmay suggested above, if it’s really a headers thing, you could configure custom headers and try. But as to what the headers would actually be, that might be answered on the other forums that I mentioned.

Furthermore, I doubt this really being a server issue as many users are displaying YouTube videos on their websites without issues. If it was a server issue, maybe they’d have got affected too. But yes, as we’re out of ideas, maybe someone else could point out as to what server-specific config might be causing this and we can then work a fix accordingly.

1 Like

I posted the question on Google’s YouTube Community and Stack Overflow. Hopefully someone knows something as I’m stumped

https://support.google.com/youtube/thread/116075355/what-are-the-security-headers-required-when-using-embedded-videos?hl=en

https://stackoverflow.com/questions/68259678/youtube-embed-video-unavailable-on-netlify-but-not-gatsby-cloud-or-localhost

If you do find a solution, do let forums know so maybe someone can benefit from it.

If it ends up being a server issue, do let us know and we can work accordingly.

Hi @chrish !

Same issue here, but I see it’s working for you on your Netlify site !

What’s your solution ?

Thx !

Hi, @Jomoka. If you post a link to the page where the embedded youtube video doesn’t work for you we would be happy to take a look.

There isn’t anything at Netlify that would prevent this so I do suspect the solution had to do with a change to the site code and not a change at Netlify.

Hi !

Find the issue : “gatsby-plugin-netlify”.

Just have to switch config var “mergeSecurityHeaders” to false, view https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/

Thanks :wink:

1 Like

Thanks for sharing the solution, @Jomoka!

My solution in this instance was to disable certain security headers in Netlify. I didn’t use a plugin, but the one you linked sounds like it worked for you.

1 Like

There are several issues causing this problem. A few of the reasons why you might get such error include:

  • There is a possibility that the video violates YouTube policy.
  • The cache got corrupted and needs to be cleared.
  • There may be a reason for the poor quality of the video.
  • There may be an issue with the internet speed.

You can try out some options to avoid such situations of non-availability of your favourite videos. A few recommended options include:

  • Try to reinstall your web browser.
  • You can try a different browser to play the desired youtube video.
  • Enable Flash and JavaScript.
  • Deleting Cookies
  • Update GPU drivers.
1 Like

Hey, all. This started happening on one of our sites after upgrading to Gatsby 5. I have no idea why, but what seemed to resolve the issue for us was setting referrerpolicy="no-referrer-when-downgrade" in the iframe element. Setting mergeSecurityHeaders: false in gatsby-plugin-netlify options had no effect.