부트스트랩에서 유튜브 반응형

부트스트랩에서 유튜브를 반응형으로 만드는 것을 적고자 한다. 부트스트랩에서 유튜브를 반응형 방식은 구체화하여 비율로 반응형으로 만들어주는 방법이 있다. 단순히 하나의 방법만 있는 것이 아니다. 3 버전에서는 2가지 비율이 있고 4 버전에서는 2가지 비율이 더 추가되어 총 4가지가 된다. 이것에 대해서는 아래 글을 읽으면 알 수 있다.

- 16:9 비율 -

위는 16:9 비율의 소스로  유튜브 소스를 <div class="embed-responsive embed-responsive-16by9">와 </div>로 감싼 후 영상의 크기에 상관없이 class="embed-responsive-item"을 더하면 반응형으로 된다. 참고로 아래비교를 위해서 아래 동영상은 4:3 비율의 동영상이다. 4:3은 전통적인 텔레비전 및 컴퓨터 모니터 표준 비율이다.

- 4:3 비율 -

16:9는 너비 16, 높이 9의 비율을 갖는 가로/세로비이다. 2009년 이후로, 16:9는 텔레비전과 컴퓨터 모니터의 가장 일반적인 화면 비율일 뿐만 아니라 HDTV, 풀 HD, 디지털 텔레비전, 아날로그 와이드 스크린 텔레비전의 국제 표준이다. - 출처 : 위키백과

 - 다른 방법 -

위 소스는 약간 복잡하다. 그래서 나는 이 블로그에서 유튜브 동영상을 여기에서 찾은 소스를 사용했다. 왜냐하면, vid라는 단어만 쓰면 되니 간단하다는 생각이었다. 다른 사람에겐 위가 단순할 지 몰라도 나에겐 복잡했다. 

나름 간단한 방법이라고 찾았는데 위 영상을 보듯이 4: 3으로 가로:세로가 1.33:1되니 잘리는 부분이 많다. 영상을 위주로 한다면 16:9 비율로 만들어야겠다는 생각이 들 것이다. 내가 이 블로그에서 사용하는 방식은 위와 같다. 이 글에서 보니 내가 사용한 방식이 4:3 비율이었다는 것을 알았다. 그동안 4:3 비율을 써도 불편함이 없었다. 

부트스트랩 4는 16:9, 4:3 비율을 포함하여 와이드스크린 컴퓨터 게이밍 모니터에서 지원하는 21:9 비율과 정사각형인 1:1 비율도 포함됐다. 결과는 위 Result를 누르면 확인할 수 있다. 내가 이 블로그에서 보여주고 싶은데 이 블로그가 부트스트랩 3을 사용하므로 부트스트랩 4에서 21:9와 1:1 비율을 jsFiddle을 이용했다. jsFiddle에 부트스트랩 4를 사용한 후 이 글에 삽입하면 된다. 참고로 위에서 HTML을 보면 소스를 볼 수 있고 Result를 누르면 결과를 볼 수 있다.

기간 제한없는 MS오피스