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

안녕하세요

bunny.net 스트림 영상을 포럼에 삽입하려고 했는데 작동하지 않습니다.

직접 링크는 이미지 미리보기만 표시합니다:

iframe으로 삽입 코드를 넣어도 아무것도 표시되지 않습니다:

:arrow_down:

:arrow_up:

코드:

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

게시 전에 allowed iframes 사이트 설정에 https://iframe.mediadelivery.net/embed/를 추가했나요?

이것은 아직 Discourse에서 Onebox로 지원되지 않는 것 같습니다.

다만, iframe은 작동합니다(크기는 작지만):

allowed iframes 설정에 https://iframe.mediadelivery.net/embed/를 추가하는 것을 잊지 마세요 :slight_smile:


아, 딱 1초 늦었네요 :smile:

Falco와 Coin-coin, 감사합니다!

이 게시글을 해결로 표시하겠지만, 마지막 질문이 하나 있습니다.

Bunny는 “반응형이 아닌” 경우 이 코드를 제안했습니다:

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

하지만 크기가 올바르지 않습니다:

그리고 "반응형"을 위한 이 코드는:

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

크기가 너무 작습니다.

어떤 조언을 주실 수 있을까요?

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

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

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

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

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

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

Coin-coin님 감사합니다

드디어 Bunny iframe 코드에 해당 설정을 사용하게 되었습니다:

  • 반응형 코드 선택 안 함
    image

  • 기본 코드에서 size를 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>

데스크톱에서는 높이가 약간 작고, 스마트폰에서는 약간 높게 보일 수 있지만, 너비는 괜찮을 것입니다.

Onebox가 있으면 좋겠지만, 현재 discourse에서는 youtube, vimeo, TikTok만 지원되는 것 같습니다.