Embedding YouTube videos on Azure Static Web Apps

Galdin Raphael -

I tried embedding a YouTube video on a page hosted on Azure Static Web Apps, but saw a "Video unavailable" error:

I tried the same embed code locally and on another site, and it worked in both places. After much digging, I found that this had to do with the default Referrer Policy set by Azure Static Web Apps:

Referrer-Policy: same-origin would cause the browser to skip the Referer header for YouTube (i.e. cross-origin) requests. And it turns out, YouTube does not like that!

To fix this, override the default Referrer-Policy by creating a staticwebapp.config.json in the repository root:

{
  "globalHeaders": {
    "Referrer-Policy": "strict-origin-when-cross-origin"
  }
}

That should update the header correctly:

And the YouTube embed should now work like it should: