부트스트랩3,4,5에서 동영상 비율과 반응형

이 글에서 부트스트랩 3, 4, 5로 버전업되면서 유튜브 등 동영상을 어떤 비율로 반응형으로 처리하는지 적어보고자 한다. 

 

부트스트랩 3

 

부트스트랩3에서는 유튜브를 비롯한 동영상을 16:9와 4:3 두 가지를 비율로 반응형으로 처리한다. 16:9인 경우 나는 3에서 반응형으로 만들기 위해 클래스에 embed-responsive embed-responsive-16by9라는 것을 써주어야 하므로 귀찮아 사용하지 않는다.

 

얼마 전까지 4:3 비율로 반응형으로 만들었던 소스를 사용했다. 왜냐하면 그 소스는 단지 클래스에 vid라고만 추가해주면 되기 때문이다. 그리고 아래는 유튜브를 16:9와 4:3 비율로 반응형으로 처리해주는 소스다. 참고로 짜증 나게 삽입한 일부 태그가 사라진다.

 

위키백과를 보니 4:3 비율은 전통적인 텔레비전 및 컴퓨터 모니터 표준이라 하고 16:9는 HD 비디오 표준과 미국 디지털 방송 TV 표준이라 한다. 그리고 고선명 텔레비전과 유럽의 디지털 텔레비전이라 한다. 아래 첫 번째 동영상이 4:3이고 다음이 16:9 동영상이다. 내 노트북 모니터에서 4:3이나 16:9 비율은 문제없다. 

 

 

 

 

일반적인 소스는 아래와 같은데 위 동영상 소스에서 아이프레임(iframe)에 class="embed-resposive-item"는 없다. embed-resposive-item은 다른 특성의 스타일링을 일치시킬 때 옵션적으로 사용한다고 한다. 무슨 말인지 모르겠다. 위 동영상의 경우 embed-resposive-item 없지만 스마트폰 등에서 반응형에 문제없다.

 

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

 

부트스트랩 4

 

부트스트랩 4로 업그레이드되면서 16:9, 4:3에 1:1과 21:9가 추가됐다. 아래를 보면 알겠지만 4:3과 16:9 비율에 익숙해서인지 1:1과 21:9는 어색하다. 가장 어색한 것은 1:1 비율이고 내 노트북에서는 21:9 비율로 뮤직비디오를 재생하니 작은 느낌이 들었고 큰 모니터와 스마트폰으로 볼 때 모르겠다. 재생 전 썸네일을 볼 때 21:9 비율도 괜찮았다. 재생하니 작다는 것이 문제였다. 참고로 아래 코드 편집기는 무료인 JSFiddle을 티스토리에 삽입했다. 

 

 

위 4에 적용되는 1:1과 21:9 비율에 대한 동영상 소스는 아래와 같고 4:3과 16:9 비율 소스와 다른 것이 없다. 소스를 보면 알겠지만 숫자를 변경하면 된다. 

 

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

 

부트스트랩 5

 

부트스트랩 5에서 유튜브를 반응형으로 만드는 것은 4에서 추가된 것은 없다. 바뀐 것은 단어의 단순함이다. 16:9인 경우 복잡하게 embed-responsive embed-responsive-16by9과 embed-responsive-item 라는 복잡한 단어가 따라왔다. 단어가 복잡해서 3에서는 vid라는 것을 사용한다고 적었다.

 

하지만 5에서는 간단히 클래스에 ratio ratio-16x9라는 단어만 삽입하면 된다. 다른 예로 21:9인 경우 ratio ratio-21×9이 된다. 아래 소스와 같이 1:1, 4:3, 16:9, 21:9 표시이다.

 

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

 

유튜브에만 해당되는 것이 아니다

 

위에서 동영상이 유튜브니 유튜브만 해당할 것이라 생각할 수 있다. 여기에서 설명한 1:1, 4:3, 16:9, 21:9가 유튜브에만 해당되는 것이 아니고 모든 동영상에 해당된다. 즉, 카카오TV, 네이버 TV, 비메오에도 얼마든지 해당된다.

 

아래 두 개는 카카오TV에 4:3과 16:9인 반응형으로 적용했다. 동영상에서 4:3(1.33:1) 비율이 16:9(1.77:1)보다 세로가 크다는 것을 느낄 수 있다.  

 

 

 

아래는 네이버TV로 16:9 비율로 반응형으로 되며 그 아래는 비메오(vimeo)로 마찬가지로 16:9로 반응형이 된다. 참고로 4:3 비율은 사용하지 않았다.