[HTML&CSS]동영상 반응형으로 삽입하기

HTML

<div class="iframe_wrap">
 <iframe src="https://www.youtube.com/embed/PH5mI1VGqQo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

.iframe_wrap{
    position: relative; 
    height: 0;
    overflow: hidden;
    max-width: 100%;
    padding-bottom: 56.25%; 
  /*
    56.25% => 16:9 비율의 영상
    75% => 4:3 비율의 영상
  */
}
.iframe_wrap iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}