Embed Bunny Stream videos doesn't work

Support
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>
1 Like
2

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

4 Likes
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:

2 Likes
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 ?

1 Like
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 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.

3 Likes
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.

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.