CSS)모든 브라우저에 적용되는 Full-size Video 만들기

 

 

*

*

 

 

동영상을 배경으로 사용하고자 할 때 가장 편한 방법은

object-fit 속성을 사용하는 것이지만,

IE와 몇몇 브라우저에서는 해당 속성을 인식하지 못합니다.

 

 

 

이 글은

object-fit 속성 없이 css에서 object-fit: cover를 적용한 것과 같은 결과물을 만드는 방법입니다.

동영상을 화면에 가득 차는 배경으로 사용하고 앞에 다른 요소를 배치할 수 있습니다.

크롬, IE, Edge, 파폭, UC브라우저에서 확인해 보았습니다.

 

 

 

우선 JSFiddle에서 작성한 예시입니다.

Edit fiddle - JSFiddle

 

 

 

아래는 작성한 예시 중 관련된 내용입니다.

 

 

html

<div id="video_area">
    <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" id="background_video" preload="auto" autoplay="autoplay" loop="loop" muted="muted" volume="0"></video>
</div>
<section id="section1">
    <h1>Big Buck Bunny</h1>
</section>
<section id="section2">
    <p>a full-size background video w/o object-fit attribute
       for different browsers
    </p>
</section>

#video_area 영상을 담을 영역

#background_video 배경이 될 영상

#section1 영상 앞에 포개질 요소

 

 

 

 

css

#video_area {
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
}
#background_video {
    z-index: -1;
    width: 100vw;
    position: absolute;
}

 

 

예시에서는 기본값으로 width:100vh;를 설정했습니다.

이제 화면이 영상에 비해서 가로로 길어도(화면이 영상에 비해 종횡비가 커도) 좌우에 여백이 생기지 않도록 영상이 확대됩니다.

그리고 확대된 만큼 화면을 넘어서게 된 상하 영역은 #video_area의 overflow: hidden;에 의해 화면에 나타나지 않습니다.

 

 

그렇지만, 이대로는 화면이 세로로 길 때는(화면이 영상에 비해 종횡비가 작으면) 상하에 여백이 생깁니다.

따라서 영상의 종횡비에 따라서 아래의 내용을 추가합니다.

 

 

css

@media screen and (max-aspect-ratio: 1219/685) {
   #background_video {
       width: auto;
       height: 100vh;
    }
}

영상의 종횡비를 max-aspect-ratio:에 넣습니다.

1219/685는 예시에 사용한 영상의 종횡비입니다. 1200x800 영상을 사용한다면 (max-aspect-ratio: 3/2)입니다. 

 

 

 

이제 화면이 영상에 비해 종횡비가 작을 때는

영상의 높이가 100vh로 강제되고 좌우 영역은 화면을 넘어서 보이지 않습니다.

 

 

 

 

---

이 포스트가 도움이 되었다면 '공감'을 눌러주세요.

관련된 유익한 정보가 업로드됩니다!

 

 

*

*