반응형 YouTube Embedding with Bootstrap

복사 및 붙여넣기가 항상 작동하는 것은 아닙니다 ☹️

거의 비슷하지만 YouTube 동영상에서 임베드 코드를 복사하여 붙여넣으면 여전히 문제가 발생할 수 있습니다. 특히 모바일에서. 오늘 아침에 simple web app을 사용하여 만든 Bootstrap 5에 튜토리얼 비디오를 추가하면서 이 사실을 알게 되었습니다.



이것은 잘 작동했고 localhost:5500에서 잘 미리 보았습니다. 하지만 iPhone 11에서 라이브 사이트를 미리 보았을 때 모바일에서는 엉망이었습니다. 고정 너비가 화면 오른쪽으로 확장되었습니다. 당신이 나와 같으면 이런 일을 만날 때마다 무한한 갈등을 일으킵니다.

운 좋게도 Bootstrap이 문서화하는 매우 쉬운 수정 사항이 있습니다. Bootstrap 4 handles it this way . Bootstrap 5 handles it this way .

코드 💾

둘 다 부모html <div>를 .embed-responsive 또는 .ratio(부트스트랩 버전에 따라 다름)로 래핑한 다음 해당 요소 내에 iframe을 가집니다.

부트스트랩 5

내 div는 다음과 같습니다.

<div class="tutorial container text-center my-5 ratio ratio-16x9">
</div>

그리고 YouTube 복사/붙여넣기 포함 코드에서 모든 보풀을 제거하여 iframe용으로 남겨 두었습니다.

<iframe src="https://www.youtube.com/embed/qgInM6FH8Lk?rel=0"
    allowfullscreen>
</iframe>

부트스트랩 4

Bootstrap 4에는 동일한 작업을 수행하는 다른 의미 체계가 있습니다.

사업부:

<div class="tutorial container text-center my-5
    embed-responsive embed-responsive-16by9">
</div>

아이프레임:

<iframe class="embed-responsive-item"
    src="https://www.youtube.com/embed/qgInM6FH8Lk?rel=0" 
    allowfullscreen>
</iframe>

흥미롭게도 처음에 Bootstrap 4 솔루션을 실수로 사용했는데 큰 화면에서 완전히 확장되지 않는 동안 모바일에서 작동했습니다.

해시노드 임베딩 🖥️

보너스! 다음은 문제의 동영상입니다. 그리고 여기 Hashnode에 삽입하는 것은 매우 쉽습니다. 필요한 것은 편리한 퍼센트 기호 😀입니다. Here are the embed docs.%[https://www.youtube.com/watch?v=qgInM6FH8Lk]
그리고 DEV에서는 구문이 약간 다릅니다.{% embed https://www.youtube.com/watch?v=qgInM6FH8Lk %} 👇



그리고 이 기사를 쓰면서 문서로 건너뛰지 않고도 멋진 단축키를 찾는 것이 더 쉬워졌다는 것을 깨달았습니다. 기사 상단의 미리보기 링크 옆에 가이드 링크가 있습니다.

마크다운, 임베드 및 여기에서 블로그에 일반적으로 사용되는 기타 도구에 대한 훌륭하고 빠른 리소스입니다. 👇

안녕! 👋

도움이 되셨기를 바라며 좋은 하루 보내세요!

이리 와서 나에게 안녕이라고 말하거나 .