유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기

 

*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다.

css만으로 반응형 비디오 만들기

동적인 값을 구할 때, 보통 js를 많이들 사용합니다.

하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠.

 

javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 

 

먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다.

보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다.

 

16:9 비율의 해상도 표

2160p	3840x2160
1440p	2560x1440
1080p	1920x1080
720p	1280x720
480p	1280x720
360p	640x360
240p	426x240

 

반응형 비디오를 만들기 위해 본인이 올리려는 비디오의 비율을 먼저 아셔야합니다.

모든 값은 반응형이므로 width:100%를 기준으로 생각하여 height값을 넣을 것입니다.

 

21:9 일경우 9/21 = 0.42857140.4285714285714286‬%... (반올림하던 버리던, 이럴 경우 각자의 판단이 중요합니다^^) 16:9 일경우 9/16 = 0.5625% 4:3 일경우 3/4 = 0.75%

 

계산 방식 감이 오시죠?

 

자 그럼 16:9 비율의 동영상으로 가지고 작업한 html과 css를 가져와 보도록 하겠습니다. 

 

HTML

<div class="video_wrap">
  <iframe src="https://www.youtube.com/embed/cEN00wMFB2A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

 

비디오 태그(iframe, video)와 부모 태그가 필요합니다.

 

CSS

.video_wrap{ position:relative; width:100%; height:0; padding-bottom:56.25%; }
.video_wrap iframe{ position:absolute; width:100%; height:100% }

-비디오 영역에 실질적인 영역 값을 주게됩니다.

-위에서 계산한 비율 값을 넣어주는데, height가 아니라 padding-bottom 값으로 줍니다.

width:100%, padding-bottom:56.25%

 

여기서 왜? 

height가 아니고 padding-bottom으로 높이 값을 컨트롤하는지 의문인 분들이 있을 수 있습니다.

참조하는 태그가 다르기 때문입니다.

 

한번 예시를 들어보겠습니다.

-먼저 height를 사용해보도록 하겠습니다.

루트영역 .section을 만들어서 height:1000px을 주었습니다.

그 후에 height:56.25%를 준 결과입니다.

무엇을 참조하는지 가장 잘보이는 부분입니다.

height의 참조 기준은 부모 태그이기 때문에 .section의 height:1000px의 56.25%값이 적용되어 video_wrap의 높이 값이 562.5px로 height가 지정된 것이 확인됩니다.

 

이렇게 되면 비디오 비율이 깨져서 상, 하단에 검정 배경이 노출되는 것이 확인됩니다.

 

-padding-bottom값을 이용하면 어떻게 되는지도 보겠습니다.

height:0;을 준 후 padding-bottom:56.25%를 주었습니다.

높이 450px이 된 것으로 보아 padding값은 적용된 태그 자신을 참조하고 있음을 확인할 수 있습니다. 

비디오가 깨지지 않고있음이 확인됩니다.

 

결론을 내리면 아래와 같습니다.

-height의 %는 부모태그 참조

-padding의 %는 적용된 해당 자신을 참조

 

그래서 padding값을 사용해서 비디오를 반응형으로 만드는 것입니다.

그리고 padding값을 사용하기 때문에 css를 더 추가해줘야합니다.

 

css 코드를 보면 video_wrap(부모태그)에 position:relative;가 있고 ifram에 position:absolute가 있음을 보셨을 것입니다.

 

이것은 padding-bottom때문에 iframe이 영역 밖으로 밀려나게되는데 iframe을 absolute로 띄워서 얹기 위함입니다.

그리고 absolute를 사용하기 위해 relative로 부모태그를 기준으로 만들어준 것이구요.

이것이 이해가 안간다면 position에 대해 찾아보시기 바랍니다.

 

자 이렇게해서 완성본입니다.

See the Pen agyaae by leeyoonseo (@okayoon) on CodePen.

 

 

 

 

그렇다면 유튜브에서 가져오는 태그만일까?하고 html5 태그인 <video>로도 실험해습니다.

결론부터 말하면 <video> 태그를 사용할 때, 이러한 편법을 쓸 필요가 없습니다.

물론 써도 반응형 비디오가 되기는 합니다만, <video>태그는 자동으로 height를 맞춰줘서 불 필요한 작업입니다.

비디오, 아이프레임 css 결과 캡쳐

width:100%, height:100%; 를 동일하게 주었을 때의 결과입니다.

<video>태그 만이 비율을 맞춰 표현함을 볼 수 있었습니다.

따라서 <video>태그일 경우에는 위의 padding-bottom 편법을 쓰지 않아도 됩니다.