반응형으로 비디오(유튜브) 삽입하기

See the Pen Responsive Video by NY KIM (@nykim_) on CodePen.

 

padding-top을 활용하는 방법

 

1) 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 줍니다.

2) 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 56.25%를 줍니다.

 

<h1>Responsive Video</h1>
<div class="video">
    <div class="video-container">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/eitDnP0_83k?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

.video-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  /* 56.25%를 주는 이유는 대부분의 비디오가 16:9 비율이기 때문입니다. (16: 9 = 100 : 56.25) 
     만약 비디오 비율이 다르다면 그에 맞춰 다른 패딩값을 넣어 주세요! */
}

iframe {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

 

 

aspect-ratio를 활용하는 방법

 

또는 aspect-ratio 속성을 써서 비율을 지정하는 것도 가능합니다. 이 방법은 훨씬 간단합니다!

다만, 구형 브라우저는 지원하지 않으므로 상황에 따라 선택해서 써주세요. (IE 미지원, Safari on iOS 15+)

 

.video-container {
  aspect-ratio: 16 / 9;
  /* 비디오 비율에 맞춰 설정 */
}

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

 

 

(+)  댓글로 남겨주신 부분 추가했습니다. 감사합니다! 🫶