تضمين فيديوهات Bunny Stream لا يعمل

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)

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

4 إعجابات

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

However, the iframe works (while small);:

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


Damn, literally 1 second late :smile:

إعجابَين (2)

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 :

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

Any suggestion ?

إعجاب واحد (1)

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:

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 إعجابات

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)

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