반응형 사이트 유튜브 영상 삽입

<figure class="youtube_video">
    <iframe src="https://www.youtube.com/..." title="..." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>

.cate_no_contents .youtube_video{position:relative;padding-bottom:56.25%; margin: 0 auto}
.cate_no_contents .youtube_video iframe{position:absolute;  top: 0; left: 0; right: 0; bottom: 0; width:100%; height: 100%;}

자식요소 (iframe)에  position : absolute로 설정,

부모 요소(youtube_video)는 padding-bottom 값을 56.25%  설정

여기서 56.25%는 16: 9 비율을 계산했을때 높이가 가로에 비해 56.25%를 차지하기 때문