Main menu

Bootstrap 3 강좌 | Tips > 유튜브 동영상 반응형으로 삽입하기

유튜브(YouTube)의 동영상을 사이트에 넣을 때 보통 iframe 소스를 이용합니다.

유뷰브에서 제공하는 코드는 다음처럼 생겼습니다.

<iframe width="560" height="315" src="xxx" frameborder="0" allowfullscreen></iframe>

widthheight가 정해진 고정 크기입니다.

고정폭으로 디자인된 사이트라면 크기를 조정해서 넣으면 되지만, 반응형이라면 곤란합니다. 웹브라우저의 가로폭이 줄어도 동영상의 크기는 줄어들지 않기 때문입니다.

iframe {
  width: 100%;
​  height: auto;
}

로 스타일링하면 가로 크기는 변경되지만 가로 세로 비율이 맞지 않습니다.

Bootstrap은 이 문제를 해결하는 코드를 포함하고 있습니다.

16:9 동영상이라면 다음과 같은 형식으로 만들면 됩니다.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

4:3 동영상이라면 다음과 같은 형식으로 만들면 됩니다.

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Created on 2015-10-15 | Updated on 2015-10-15

이 글을 공유하기

Kakao