YouTube와 Vimeo 비디오 임베드 너비

높이와 너비를 명시적으로 지정하고 최종적으로 iframe을 통해 임베드되는 모든 원박스(OneBox) 소스에 동일한 로직을 적용하지 않는 이유는 무엇일까요?


생각과 접근 방식
이론적으로, 이미 명시적인 높이/너비가 iframe에 지정되고 있다면, 동일한 일반적인 접근 방식인 종횡비(aspect ratio) 설정을 사용하여 콘텐츠를 일반적이고 확장 가능하게 만들 수 있습니다.

예를 들어, 저는 커뮤니티에서 점점 더 많은 비디오 데모를 임베드하고 있기 때문에, CDN으로 잘 알려진 Bunny.net로 전환했습니다. 이 회사의 Bunny Stream 서비스는 비디오 업로드와 임베딩을 위한 것입니다.

허용된 iframe 설정에 video.bunnycdn.com과 iframe.mediadelivery.net을 추가한 후, Bunny Stream의 URL을 쉽게 붙여넣으면 일반 폴백(generic fallback) 중 하나를 사용하여 원박스 처리가 됩니다… 하지만 모바일 기기로 볼 때 종횡비가 매우 이상해집니다. :confused:

간단한 우회책으로, 플러그인 API와 decorateCookedElement를 사용하여 iframe에 종횡비 정보를 업데이트하는 간단한 테마 컴포넌트(Theme Component)를 작성했습니다.