[CSS] 유튜브 영상 사이즈

유튜브 영상 삽입 시 반응형에 맞춰서 16:9 비율 유지하기

보통 유튜브 영상을 가져올 경우, 아래와 같이 width와 height가 지정된 코드를 가져오게 된다.

<iframe width="560" height="315"
 src="https://www.youtube.com/생략"> </iframe>

하지만 우리가 지정한 특정 width나 height에 맞추고 싶을 때는 어떻게 해야할까?

먼저, 나는 width를 100%로 지정해뒀고 반응형으로 height가 비율에 맞춰진 채로 바뀌었으면 했다.

그래서 처음에는 이미지 삽입처럼 height에 아래와 같이 auto를 주면 되나 했지만

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

이와 같이 영상의 세로길이가 잘리게 되어서 방법을 찾아보았다.

결론부터 말하자면 iframe 태그의 부모 요소를 만들어주고, 그 부모 요소에게 padding-bottom : 56.25%를 주면 된다.

왜 56.25%인가? 16:9 비율을 계산했을때 높이가 가로에 비해 56.25%를 차지하기 때문에 이와 같이 패딩값을 주면 된다.

iframe태그에 직접 padding을 입력해서는 제대로 출력이 되지 않으므로 부모 요소를 만들고, 포지션 relative와 absolute를 사용한 뒤에 부모 요소에게 padding-bottom을 준다.

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

그러면 이와 같이 영상의 사이즈가 아주 알맞게 출력되고, 반응형에도 적합하다!

너무 작아지는게 싫다면 min-width와 min-height를 16:9 비율에 맞게 값을 찾아 적용해주면 될 것 같다.