alexmas
(Alex Mas)
4월 25, 2023, 3:52오후
1
안녕하세요
bunny.net 스트림 영상을 포럼에 삽입하려고 했는데 작동하지 않습니다.
직접 링크는 이미지 미리보기만 표시합니다:
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>
Falco
(Falco)
4월 25, 2023, 3:58오후
2
게시 전에 allowed iframes 사이트 설정에 https://iframe.mediadelivery.net/embed/를 추가했나요?
Canapin
(Coin-coin le Canapin)
4월 25, 2023, 3:59오후
3
이것은 아직 Discourse에서 Onebox로 지원되지 않는 것 같습니다.
다만, iframe은 작동합니다(크기는 작지만):
allowed iframes 설정에 https://iframe.mediadelivery.net/embed/를 추가하는 것을 잊지 마세요
아, 딱 1초 늦었네요
alexmas
(Alex Mas)
4월 25, 2023, 4:21오후
4
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>
크기가 너무 작습니다.
어떤 조언을 주실 수 있을까요?
Canapin
(Coin-coin le Canapin)
4월 25, 2023, 10:21오후
5
여기서 iframe이 비디오를 올바르게 리사이즈할 수 있을지 확신이 서지 않습니다.
<iframe> 태그에서 스타일 속성이 제거되므로, 여기서 크기를 설정해도 아무런 효과가 없습니다. 자신의 테마에 CSS를 추가하는 경우를 제외하면요. 하지만 그것만으로 마법을 부릴 수는 없습니다.
iframe의 폭을 게시글 컨테이너의 100%로 설정하면 다음과 같이 렌더링됩니다:
비디오의 비율에 따라 자동으로 높이를 설정하는 것도 불가능합니다.
<div style="position: relative; padding-top: 56.25%;"> 부분은 게시 시에도 제거되므로 넣지 말고, 작은 비디오를 사용하는 것이 가장 간단한 해결책이라고 생각합니다. 더 큰 형식으로 비디오를 보고 싶은 사람들은 비디오 우하단의 전체 화면 아이콘을 클릭하면 됩니다.
Bunny stream 비디오에 대한 원박스(onebox) 지원이 가능할지 문의하기 위해 Contribute > Feature 채널에 게시글을 올릴 수도 있습니다. 하지만 수요가 높지 않다면(그렇게 보기는 어렵습니다), pr-welcome 태그에 해당될 가능성이 큽니다. 이는 팀이 직접 기능을 추가하지 않고, 코딩 지식이 조금 있는 누구든 이 기능을 구현해 Discourse에 추가할 수 있도록 허용한다는 의미입니다.
alexmas
(Alex Mas)
4월 27, 2023, 12:09오전
6
Coin-coin님 감사합니다
드디어 Bunny iframe 코드에 해당 설정을 사용하게 되었습니다:
<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만 지원되는 것 같습니다.