[CSS] Youtube 반응형 적용하기(유튜브 100%)

반응형 사이트나 모바일에서 유튜브 등의 동영상을 iframe으로 삽입할 경우 제공되는 소스를 그대로 넣으면 사이트가 어긋난다.

유튜브에서는 반응형을 지원하지 않기에 css로 처리를 해야한다.

동영상의 width는 100%, height는 0으로 설정하여 화면에서 보여지지 않게 한 후에 padding값을 조절하여 모바일 어느 기기에서도 width, height 둘 다 100%로 보여지게 한다.

HTML

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/cOA2yaGY0GU" frameborder="0" allowfullscreen=""></iframe>
</div>

CSS

화면의 비율에 따라 padding값을 다르게 줘야한다.

대부분이 56.25%이다.

화면 비율

21:9 일경우 9/21 = 0.42857140.4285714285714286‬%
16:9 일경우 9/16 = 0.5625%
4:3 일경우 3/4 = 0.75%

.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

결과물