Home
Support Forums

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.

https://dscvrd.co/noise/turnstile-s-love-connection
(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:

https://dscvrd.co/noise/frank-carter-and-the-rattlesnakes-open-up-about-new-record-sticky

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

https://dscvrd.netlify.app/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

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!