[HTML/CSS] iframe 유튜브 동영상 반응형으로 사이즈 조절하기

웹페이지 작업을 하다 유튜브 영상 삽입을 위해 iframe 을 사용할 일이 있습니다.

하지만 기본적으로 유튜브에서 공유 버튼을 눌러 iframe 태그 내용을 불러올 수 있지만 기본 사이즈가 정해져 있어 아쉬운 부분이 있습니다.

 

1. 유튜브 동영상 가져오기

 

2. 반응형 사이즈에 맞춰 사이즈 조절하기

해당 소스를 바로 복사 붙여넣기하면 반응형에 따라 달라지는 화면 사이즈에 따라 유튜브 화면 공간이 검은 배경 부분으로 잘리기 때문에 해당 문제를 해결하기 위해 아래 코드를 적용해보길 바랍니다.

 

<div class="video_container">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/bDKzSXwnfcI?si=sLpNBDuz1nRFvJG8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

 

.video_container {position:relative;padding-top:56.25%;height:0;width:100%;}
.video_container iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

 

위 소스들을 사용한다면 반응형 사이즈에 맞춰 자동으로 비율을 늘리고 줄어드는 유튜브 동영상을 추가할 수 있습니다.

 

유튜브 영상 표준 비율은 가로로 긴 16:9이기 때문에 padding-top:56.25% 를 적용하는 것