Bunny Stream 영상 임베드가 작동하지 않아요

지원
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

여기서 iframe이 비디오를 올바르게 리사이즈할 수 있을지 확신이 서지 않습니다.

<iframe> 태그에서 스타일 속성이 제거되므로, 여기서 크기를 설정해도 아무런 효과가 없습니다. 자신의 테마에 CSS를 추가하는 경우를 제외하면요. 하지만 그것만으로 마법을 부릴 수는 없습니다.

iframe의 폭을 게시글 컨테이너의 100%로 설정하면 다음과 같이 렌더링됩니다:

image
image780×334 74.6 KB

비디오의 비율에 따라 자동으로 높이를 설정하는 것도 불가능합니다.

<div style="position: relative; padding-top: 56.25%;"> 부분은 게시 시에도 제거되므로 넣지 말고, 작은 비디오를 사용하는 것이 가장 간단한 해결책이라고 생각합니다. 더 큰 형식으로 비디오를 보고 싶은 사람들은 비디오 우하단의 전체 화면 아이콘을 클릭하면 됩니다.

Bunny stream 비디오에 대한 원박스(onebox) 지원이 가능할지 문의하기 위해 Contribute > Feature 채널에 게시글을 올릴 수도 있습니다. 하지만 수요가 높지 않다면(그렇게 보기는 어렵습니다), pr-welcome 태그에 해당될 가능성이 큽니다. 이는 팀이 직접 기능을 추가하지 않고, 코딩 지식이 조금 있는 누구든 이 기능을 구현해 Discourse에 추가할 수 있도록 허용한다는 의미입니다.

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.