HTML/CSS로 유튜브 동영상 반응형 사이즈로 만들기 - Aspect-ratio
다양한 디바이스에서 영상이나 이미지를 보여줄때, 최적화된 반응형 사이즈 설정이 필요합니다. 고정 크기때문에 모바일과 데스크탑 모두 만족시키기는 어렵습니다. 하지만 Aspect-ratio 속성을 활용해 쉽게 다양한 비율의 동영상을 반응형으로 삽입할 수 있습니다
반응형 사이즈가 필요한 이유
다양한 디바이스의 사용이 당연시 되면서, 동영상도 반응형 사이즈로 삽입해야하는 상황들이 많아졌습니다.
하지만 일반적으로 유튜브에서 제공하는 동영상 퍼가기 옵션으로 소스를 가져오면 아래와 같은 모습이 됩니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/5VRodqmmzAk?si=bdggIv9n-FGP4vid" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>width="560" height="315"라고 적혀 있는 부분을 보면, 이 소스는 사이즈가 고정된 상태라는 것을 알 수 있습니다.
이런식으로 고정된 사이즈를 제공하기 때문에 우리가 브라우저에서 파일을 열었을때 사소한 문제가 있습니다.
모바일에서의 문제
560px이라는 사이즈를 생각해봅시다.
모바일에서는 어떻게 보일까요?
아래 내용은 BrowserStack에서 발표한 사람들이 주로 사용하는 모바일 사이즈 통계입니다.
- 360×800 (11.01%)
- 390×844 (7.92%)
- 414×896 (5.55%)
- 393×873 (5.26)
- 412×915 (5%)
Shreya Bose
BrowserStack에서 발표한 모바일 사이즈를 보면, 대체로 400px 안팎입니다.
유튜브에서 제공하는 태그에는 가로 사이즈가 560px로 고정되어 있습니다.
당연히 400px도 안되는 공간에 넣으면 영상이 화면바깥으로 넘어갑니다. 불필요한 가로 스크롤이 생기고, 사용자의 경험에 악영향을 끼칩니다.
화면을 쓸어넘길때마다 우측으로 넘어가는 상황이 발생하기 쉽기 때문이죠.
데스크탑에서의 문제
물론 그냥 560px을 400px로 바꾸면 되지 않겠냐고 생각할 수도 있지만, 이런 경우에는 데스크탑에서 봤을때 너무 작아보입니다. 그래서 이럴때 우리는 반응형 사이즈로 적용하고 싶어집니다.
데스크탑일때도 모바일일때도 적절한 사이즈를 유지하되 비율은 여전히 16:9 비율을 유지하고 싶을때가 많습니다.
데스크탑, 모바일만 봐도 이렇게 다양한 상황이 생기는데, 태블릿이라면? 태블릿도 사이즈가 다양하죠?
이처럼 우리는 다양한 상황에서 유연하게 반응하는 요소가 필요한 상황을 자주 마주합니다.
해결방법 #1
과거에는 이런 것들을 처리하는게 까다로웠습니다.
따로 자바스크립트 라이브러리를 붙여서 쓰거나, css에서 꼼수를 부렸어야 했습니다.
자바스크립트 라이브러리는 불필요하게 무거운 동작을 유발할 수 있으니 최대한 사용을 지양하는 것이 좋습니다.
CSS 해결책은 기본적으로 이렇습니다.
16:9 비율로 만들기
아래 소스는 영상을 16:9 비율로 유지하는 방법입니다.
HTML
<div class="video-wrapper">
<!-- 유튜브에서 퍼온 소스 중 width, height 속성을 지워줬습니다 -->
<iframe src="https://www.youtube.com/embed/5VRodqmmzAk?si=bdggIv9n-FGP4vid" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>CSS
.video-wrapper{
position: relative;
padding-bottom:56.25%;
iframe{
position: absolute;
top: 0;
left: 0 ;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}간단하게 설명하자면, 부모 요소 .video-wrapper 에서 한 번 감싸준 형태로 만듭니다. 자식 요소인 iframe이 실제 영상이 그려지는 부분인데, 이걸 부모요소가 가둬두는 거죠.
부모 요소는 56.25%라는 높이만큼 padding을 차지하는데, 자식요소가 absolute일때 부모요소가 그 높이를 제대로 인식하지 못하기 때문에, padding-top이 높이 역할을 해주고 있는 것입니다.
56.25%는 16:9 비율의 크기에서 9에 해당하는 사이즈로 가로가 100%일때 세로가 56.25%라면 16:9 비율을 유지할 수 있다는 점을 이용한 방법입니다.
실제 구현된 모습은 아래 코드펜에서 확인할 수 있습니다.
1:1 비율로 만들기
이 방법을 응용하면 1:1 비율도 유지할 수 있습니다.
이때는 padding-top의 값을 100%로 주면 됩니다.
아래 코드펜 소스를 통해서 1:1 비율 구현된 모습도 확인할 수 있습니다.
그런데 이 방법들은 사용하는게 그리 쉽지 않습니다.
16:9, 1:1 비율만 예시로 보여드렸습니다만, 틱톡이나 유튜브 숏츠처럼 9:16 세로 비율이라던지, 혹은 3:2, 4:3, 21:9와같은 비율들이 필요할 때도 있기 때문이죠.
이럴때마다 높이값에 비례해서 패딩을 계산해야하기 때문에 번거롭죠. 그래서 더 나은 방식이 나왔습니다.
해결방안 #2 (추천)
먼저 소스부터 보겠습니다. 얼마나 간결해졌는지 알 수 있을 겁니다.
HTML
<div class="ratio-16x9">
<!-- 유튜브에서 퍼온 소스 중 width, height 속성을 지워줬습니다 -->
<iframe src="https://www.youtube.com/embed/5VRodqmmzAk?si=bdggIv9n-FGP4vid" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>iframe을 div로 한 번 감싸주었고, 그 div에는 ratio-16x9라는 이름으로 클래스를 붙여줬습니다.
CSS
iframe{
// iframe의 사이즈를 가로 세로 모두 100% 차지하도록 만들어줍니다
width: 100%;
height: 100%;
}
.ratio-16x9{
aspect-ratio: 16/9;
}간단하죠? aspect-ratio 속성에 16/9라는 값만 던져주면, 바로 비율을 유지하도록 제어가 됩니다. 해결문제 #1에서 번거롭게 작성하던 것에 비하면 매우 간결해졌습니다.
역시 예시는 아래 코드펜 소스에서 참고할 수 있습니다.
16/9로 속성을 전달하면 16:9 비율이니, 틱톡, 숏츠, 릴스와 같은 세로 비율 영상은 9/16으로 입력해 9:16으로 만들어주면 됩니다.
이와 같은 방법으로 3:2, 4:3, 21:9 와 같은 비율도 아주 손쉽게 적용할 수 있습니다. 반응형 영상뿐 아니라 이미지도 똑같은 방식으로 제어할 수 있습니다.
이 방법을 이용하면 더 이상 반응형으로 동영상/이미지를 넣는데 큰 고민이 없을 것입니다.
반응형 동영상 혹은 이미지를 생성하기 위해 HTML/CSS 를 작성하는 수고를 덜어줄 도구를 소개합니다. 아래 링크를 누르시면 바로 사용 가능합니다.
Comments ()