General: Displaying Bunny Stream videos on Hugo-based Azure Static Websites

I have been using Bunny Stream for hosting videos lately. I love those people. What a great service.

But I wanted to add a few videos to our SQL Down Under website that was a Hugo Azure Static Website. I added the embed code from the Bunny Stream site for the video, and what I found was:

• The videos appeared and played on desktop versions of Chrome or Edge
• The page appeared but no videos appeared when viewing the page from either Safari or Chrome on iOS

At first, I thought it might be a screen resolution thing, but it didn’t work on either an iPhone, or on an iPad that had the same resolution as my laptop where things did work.

The setting that blocked

In Bunny Stream, for each library, there is a setting that was blocking this:

When I disabled that, the video would play. But I didn’t want that disabled, so I had to do more.

First thing, is I had to make sure that my website was listed as an allowed referrer. There’s a list of those on the same page, so I added it there.

But it still wouldn’t work.

Fixing the referrer issue

When I used the developer tools on the browser, I could see that the referrer details were missing on the requests.

So I needed to add that to the Hugo based site.

I created a file named staticwebapp.config.json in the static folder, and put in the following:

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

That makes sure the referrer policy is applied to all pages of the site.

And, once deployed, it all worked.

I hope this helps someone else.

2025-11-08