유튜브 동영상 반응형으로 삽입하기

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

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

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

width와 height가 정해진 고정 크기입니다.

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

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>

예제

responsive-embed-01.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap | Responsive embed</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="pagination-01.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h3>Batman v Superman</h3>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qpPb3PFqMBw"></iframe>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>