YouTube와 Vimeo 비디오 임베드 너비

주제를 생성할 때 단순히 비디오 링크를 붙여넣으면 어떤 비디오든 임베드할 수 있습니다.
그러나 YouTube 비디오를 임베드하면 (아래 참조) 화면 끝에서 끝까지 늘어난 반면, Vimeo 비디오를 임베드하면 그렇게 늘지 않습니다.

이 문제를 수정할 수 있는 방법이 있을까요?

Vimeo 임베드 코드에서 비디오 크기를 지정해도 차이가 없습니다. 비디오는 여전히 링크를 붙여넣었을 때와 동일하게 표시됩니다.

두 경우 모두 제가 하는 일은 단순히 비디오 URL을 붙여넣는 것입니다.

YouTube

Vimeo

https://vimeo.com/300660748

여기서 비디오를 임베드할 수 없는 것 같습니다. 그래서 커뮤니티에서 캡처한 스크린샷을 첨부합니다. Vimeo 비디오의 너비가 YouTube 비디오의 너비보다 짧습니다. Vimeo 비디오도 허용되는 최대 너비까지 확장되도록 할 수 있는 방법이 있을까요?

4개의 좋아요

전체 폭 Vimeo 원박스(oneboxes)에 대한 PR이 있습니다

6개의 좋아요

테스트

YT

Vimeo

5개의 좋아요

Falco님, 안녕하세요.
저는 Discourse를 처음 사용하는데, PR이 무엇을 의미하는지 전혀 모르겠습니다. (질문자님이 "I have PR for full width vimeo oneboxes"라고 말씀하신 부분 말입니다.)

테스트가 이제 정상적으로 작동하는 것을 보여주셨지만, 실제로 작동하게 하려면 제가 무엇을 해야 하는지 궁금합니다. 왜냐하면 제 커뮤니티의 Vimeo 비디오가 여전히 전체 폭으로 확장되지 않기 때문입니다.

위 게시물에서 질문자님이 하신 작업이 무슨 의미인지 여전히 이해하려고 노력하고 있습니다. 제 커뮤니티에서 이 문제를 해결하기 위해 제가 무엇을 해야 하는지 알려주시면 정말 감사하겠습니다. 감사합니다.

1개의 좋아요

Amber님,

PR은 "pull request"의 약자로, GitHub와 관련이 있습니다. 기본적으로 Falco가 Discourse 코드에 변경 사항을 적용했으며, 해당 변경 사항을 Discourse에 병합하기 전에 검토를 요청했다는 의미입니다.

이 특정 Discourse 사이트인 meta.discourse.org는 엔지니어가 변경 사항을 만들 때마다 자동으로 업데이트됩니다. 하지만 고객님의 사이트는 그렇게 자동으로 배포되지 않으며, 우리는 고객 사이트를 정기적이지만 덜 잦은 주기로 배포합니다. 저는 고객님의 사이트에 대한 배포(업데이트)를 진행했습니다. 배포는 약 30분 이내에 완료될 것입니다.

배포가 완료되면 게시물을 다시 빌드해야 합니다. 이를 위해 게시물 아래의 “더 보기” 버튼을 클릭한 후, 관리자 렌치 아이콘을 클릭하십시오. 마지막으로 "HTML 다시 빌드"를 클릭하세요.



4개의 좋아요

팔코님,
정말 감사합니다.

조슈아님, 모든 것을 명확히 설명해 주셔서 정말 감사합니다. 감사합니다.

3개의 좋아요

안녕하세요 @Falco

이 변경 사항이 비공개 Vimeo 임베드에도 적용되나요? (즉, ?h=<일부 식별자>가 붙은 플레이어 링크)

커밋의 코드 변경 사항을 보면, 이전에 작동했다면 이 변경 사항으로도 작동해야 합니다. :slight_smile:

2개의 좋아요

임베드 크기에 이상한 현상이 발생하고 있습니다. 이 커밋 이후에도 비공개 비디오의 크기는 여전히 작게 유지되고 있습니다. 이것도 전체 너비로 만들 수 있는 방법이 있을까요?

1개의 좋아요

비공개 영상을 만들 Vimeo 계정이 없어서 :person_shrugging:

1개의 좋아요

저도 같은 문제를 겪고 있습니다. Discourse 2.9.0.beta9 (56832adf17) 버전을 사용 중입니다.

이 문제는 작은 화면에서 특히 두드러집니다(화면 크기를 조정해 보면 두 번째, 즉 OneBox로 렌더링된 비디오가 얼마나 작아지는지 확인할 수 있습니다).


여기에는 URL에 플레이어 정보가 포함된 링크입니다… (이 링크는 작은 화면에서 축소되지 않지만, 중앙 정렬하는 방법도 찾지 못하겠습니다.)

https://player.vimeo.com/video/743344591

https://player.vimeo.com/video/743344591


아래에 있는 링크는 OneBox로 렌더링된 것입니다… (이것은 작은 화면 크기에서 축소되어 너무 작아집니다.)

https://vimeo.com/743344591

그럼 괜찮은 건가요? merge가 우리의 인스턴스에 영향을 미치지 않을 수 있는 이유가 무엇일까요?

아마 제가 무언가를 놓치고 있는 것 같습니다 :slight_smile:

그게 어떻게 게시되었나요? 게시물을 원본으로 공유해 주시겠어요?

1개의 좋아요

비메오(Vimeo)에서 가져온 비디오를 우리 디스코스(Discourse) 커뮤니티에 공유하기 시작했기 때문에 몇 가지 테스트를 하고 있습니다. 다음은 원본입니다:

테스트

https://vimeo.com/channels/staffpicks/353070045

VS

https://vimeo.com/353070045

사용하신 URL 형식을 인식하지 못하여, 특수한 Vimeo onebox 대신 일반 onebox 코드가 적용되었습니다.

2개의 좋아요

제프가 몇 년 전에 공유한 링크를 사용했어요. 그래서 이제 더 좋아졌으니 감사합니다!

(그런데) 왜 전체 너비로 안 되죠? 여전히 고정되어 있어요 :cry:

4:3 화면비율의 영상이기 때문입니다.

2개의 좋아요

높이와 너비를 명시적으로 지정하고 최종적으로 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)를 작성했습니다.

이 문제에 대한 업데이트가 있나요?

Bunny.net은 서비스의 품질과 속도 덕분에 점점 더 인기를 얻고 있습니다.

지금 Discourse에 Bunny 스트리밍 영상을 임베드할 수 있을까요?