[bootstrap] 부트스트랩 – 비디오 – 반응형 임베드 (Responsive embed)

유튜브와 같은 비디오를 반응형으로 만들 수 있습니다.

<div class=”embed-responsive embed-responsive-16by9“>
<iframe class=”embed-responsive-item” src=”//www.youtube.com/embed/E_c1ouE2X5E” frameborder=”0″ allowfullscreen></iframe>
</div>

.embed-responsive 는 기본 선택자이고
.embed-responsive-16by9 또는 .embed-responsive-4by3 을 사용한 내부에 iframe, object, embed, video 태그를 사용한 비디오를 추가하면 됩니다.

유튜브에서 iframe 코드를 복사해 사용할 경우 그대로 붙여넣어도 되며 width, height, frameborder 등의 속성은 필요 없습니다.
화면 너비만 변경하면 가로 세로 비율이 자동으로 바뀝니다.

video 사용법은 아래와 같습니다.

<div class=”embed-responsive embed-responsive-16by9“>
<video autoplay loop class=”embed-responsive-item“>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>