Embed Bunny Stream videos doesn't work

Product Support

AI-generated summary

User alexmas reported issues embedding Bunny.net Stream videos in Discourse, noting that direct links show only a preview image and iframe embeds display nothing. Falco and Canapin confirmed the iframe must be added to the allowed iframes site setting for it to render — which it does, albeit small. alexmas tested both Bunny’s non-responsive and responsive iframe codes, but encountered sizing issues: non-responsive renders too large, responsive too small. Canapin explained that Discourse strips iframe style attributes, making automatic resizing impossible without custom CSS or theme modifications. The best workaround is to use a simple iframe without the responsive wrapper and let users click fullscreen. alexmas settled on using Bunny’s non-responsive code with width="99%" height="300" for acceptable cross-device display, acknowledging that Onebox support for Bunny Stream (currently limited to YouTube, Vimeo, TikTok) would be ideal but unlikely without community contribution via pr-welcome.

1

Hi

I’m trying to embed bunny.net Stream videos on my forum, but it doesn’t work.

Direct link only show a image preview :

and embed code with iframe show nothing :

:arrow_down:

:arrow_up:

code :

<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
2

Did you add https://iframe.mediadelivery.net/embed/ to the allowed iframes site setting before posting?

3

I think this is simply not supported yet by Discourse as a Onebox.

However, the iframe works (while small);:

image
image773×353 44.4 KB

Remember to add https://iframe.mediadelivery.net/embed/ in your allowed iframes setting :slight_smile:

Damn, literally 1 second late :smile:

4

Thanks Falco and Coin-coin !

I will set this post Resolved, but last question.

Bunny suggest this code for “non reponsive” :

<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

But the size isn’t the good one :

image
image473×526 126 KB

And this code for “responsive” :

<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

And the size is too small

image
image768×258 42.3 KB

Any suggestion ?

5

I’m not sure an iframe here can properly resize the video.

Style attributes are stripped out from the <iframe> tag, so setting sizes here won’t have any effect, unless you add the CSS in your own theme. But it won’t do magic.

If you set the iframe width to 100% of the post container, it will render like this:

image
image780×334 74.6 KB

And you can’t set an automatic height that will depend on the video’s ratio.

I think there’s no straightforward solution other than using the small video (don’t put the <div style="position: relative; padding-top: 56.25%;"> part as it will be removed when you post anyway), and people who want to see the video in a larger format will click on the fullscreen icon on the bottom right of the video.

You can also post on Contribute > Feature to ask if a onebox support for Bunny stream videos could be made, but unless there’s a high demand (which I doubt), it will likely belong to the pr-welcome tag, which means that the team won’t add the feature themselves but anyone with a bit of coding knowledge is welcome to code this feature so it can be added into Discourse eventually.

6

Thanks Coin-coin

Finally I’m going to use that setting on Bunny iframe code :

  • not selecting for responsive code
    image

  • On the default following code, replace size by width=“99%” height=“300”

<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

The height will be a little too small on desktop, and a little too high on smartphone, but the width will be ok.

Onebox would be great, but as I can see we only have youtube, vimeo and TikTok for now on discourse.