Embedding YouTube videos on Azure Static Web Apps
I tried embedding a YouTube video on a page hosted on Azure Static Web Apps, but saw a "Video unavailable" error:
![](https://galdin.dev/content/images/2023/10/image.png)
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:
![](https://galdin.dev/content/images/2023/10/Screenshot-2023-10-06-011359.png)
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:
![](https://galdin.dev/content/images/2023/10/image-3.png)
And the YouTube embed should now work like it should:
![](https://galdin.dev/content/images/2023/10/image-2.png)