[css] 유튜브 영역 반응형으로 잡기

<div class="video-wrap">
    <iframe id="video" width="100%" height="315" src="https://www.youtube.com/embed/l9OFVBkhBVY" frameborder="0" allow="encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}

*참고

https://code-study.tistory.com/35

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기