HTML DIV tag : Video 유투브 동영상 반응형 (responsive) 임베드 방법 - 웹페이지 너비에 맞게 비디오 너비 높이 자동 조절

유투브(YouTube) 비메오(Vimeo) 등에 올려진 동영상을 웹페이지나 블로그에 심는(embed [임베드]) 경우에,

웹페지 너비에 따라 자동으로 비디오 너비(width)와 높이(height)가 조절되게 하는 방법입니다.

이렇게 하는 방법은 여러가지가 나와 있습니다. 아래는, 브라우저 특성을 타지 않으면서도, 간단하고 쉬워 누구나 할 수 있는 방법 가운데 하나입니다.

아래에서 보는 바와 같이, 스크립트는 두 부분으로되어 있습니다.
하나는 클래스(class) 스타일(style)을 지정하는 부분과, 둘은 동영상 임베드 스크립트를 놓는 부분입니다. 각 부분에 대한 설명은 아래쪽에 각각 해놓았습니다.

[동영상 반응형으로 심는 스크립트 예]

<style type="text/css">
<!-- 비디오 설정을 함 -->
.videoTeduri {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoTeduri iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="videoTeduri">
<!-- 유투브 등에서 임베드 코드를 복사하여 그대로 붙여 넣음 -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EyIk1kjEWXI?start=190" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

[클래스 스타일 지정 부분]

<style type="text/css">
.videoTeduri {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.videoTeduri iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

1) 위 클래스 지정부분은 비디오가 들어가는 부분 위쪽에 놓으면 됩니다.
2) 동일한 페이지에 너비/높이 비율이 같은 비디오가 여러개 들어가는 경우에도, 한 번만 놓으면 됩니다.
3) 위에서, 빨강색으로 표시한 padding-bottom: 56.25%; 부분이 비디오의 너비/높이 비율을 설정한 것입니다. 위에서 56.25%는 최근에 많이 쓰이는 16:9 비율을 %로 표시한 것입니다.
56.25 = 9 (높이) ÷ 16 (너비) x 100.

유투브 등에서 동영상 임베드 스크립트를 복사하면, width="560" height="349" 와 같이 해당 동영상의 너비(width)와 높이(height)가 나와 있습니다. 이 수치를 가지고, 비율(%)을 계산하여, 위 빨강색 표시 부분의 수치를 알맞게 변경하면 됩니다.

너비/높이 비율(%) 계산 예)
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EyIk1kjEWXI?start=190" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

위 스크립트는 유투브에서 복사한 임베드 스크립트 입니다. 빨강색으로 표시한 바와 같이, 너비(width)와 높이(height)가 나와 있습니다. 이것을 다음과 같이 비율(%)로 계산하여 적용하면 됩니다.
비율(%) = 315 (height 높이) ÷ 560 (width 너비) x 100 = 56.25%

최근 비디오는 대체로 16:9 비율 (56.25%)이 많습니다. 예전의 비디오는 4:3 비율 등이 있습니다. 그런 경우에는 위와 같은 방법으로 비율(%)을 계산하면 됩니다.


[동영상 스크립트 넣는 부분]

<div class="videoTeduri">
  <!-- 유투브 임베드 코드를 복사하여 그대로 붙여 넣음 -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" lowfullscreen></iframe>
</div>

1) 유트브 등에서 동영상 임베드 스크립트를 복사하면, 위에서 보는 바와 같이, 대체로  <iframe ...... ></iframe>으로 되어 있습니다. 복사한 스크립트를 그대로 <div class="videoTeduri"> 와 </div> 사이에 붙여 넣으면 됩니다.

2) 동영상 스크립트 부분은 웹페이지에서 원하는 위치에 놓으면 됩니다.


[실제로 적용한 모습]
첫번째 비디오는 유투브에서 복사한 스크립트를 그대로 붙여 넣은 것이고, 두번째는 같은 스크립트를 위에서와 같은 방법으로 스타일을 지정하여 붙여 넣은 것입니다. 브라우저 폭을 늘였다 줄였다 해 보면, 그 차이를 볼 수 있습니다.

참고) 한 페이지에, 너비/높이 규격이 서로 다른 동영상을 넣는 경우에는, 클래스(class) 대신에, 고유성을 같는 아이디(id)를 적용하여, 각 비디오 마다 설정부분을 붙여 주면 됩니다.