*
*
동영상을 배경으로 사용하고자 할 때 가장 편한 방법은
object-fit 속성을 사용하는 것이지만,
IE와 몇몇 브라우저에서는 해당 속성을 인식하지 못합니다.
이 글은
object-fit 속성 없이 css에서 object-fit: cover를 적용한 것과 같은 결과물을 만드는 방법입니다.
동영상을 화면에 가득 차는 배경으로 사용하고 앞에 다른 요소를 배치할 수 있습니다.
크롬, IE, Edge, 파폭, UC브라우저에서 확인해 보았습니다.
우선 JSFiddle에서 작성한 예시입니다.
아래는 작성한 예시 중 관련된 내용입니다.
html
1
2
3
4
5
6
7
8
9
10
11
|
<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>
|
cs |
#video_area 영상을 담을 영역
#background_video 배경이 될 영상
#section1 영상 앞에 포개질 요소
css
1
2
3
4
5
6
7
8
9
10
11
12
|
#video_area {
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
position: absolute;
}
#background_video {
z-index: -1;
width: 100vw;
position: absolute;
}
|
cs |
#background_video에는 width:100vw와 height:100vh를 동시에 적용하지 않습니다.
동시에 적용하고 화면 비율을 이리저리 바꿔보면, 상하든 좌우든 여백이 생깁니다.
예시에서는 기본값으로 width:100vh;를 설정했습니다.
이제 화면이 영상에 비해서 가로로 길어도(화면이 영상에 비해 종횡비가 커도) 좌우에 여백이 생기지 않도록 영상이 확대됩니다.
그리고 확대된 만큼 화면을 넘어서게 된 상하 영역은 #video_area의 overflow: hidden;에 의해 화면에 나타나지 않습니다.
그렇지만, 이대로는 화면이 세로로 길 때는(화면이 영상에 비해 종횡비가 작으면) 상하에 여백이 생깁니다.
따라서 영상의 종횡비에 따라서 아래의 내용을 추가합니다.
css
13
14
15
16
17
18
|
@media screen and (max-aspect-ratio: 1219/685) {
#background_video {
width: auto;
height: 100vh;
}
}
|
cs |
영상의 종횡비를 max-aspect-ratio:에 넣습니다.
1219/685는 예시에 사용한 영상의 종횡비입니다. 1200x800 영상을 사용한다면 (max-aspect-ratio: 3/2)입니다.
이제 화면이 영상에 비해 종횡비가 작을 때는
영상의 높이가 100vh로 강제되고 좌우 영역은 화면을 넘어서 보이지 않습니다.
이 포스트가 도움이 되었다면 '공감'을 눌러주세요.
관련된 유익한 정보가 업로드됩니다!
*
*
'IT 블로그 > 웹 개발·SEO' 카테고리의 다른 글
[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기 (0) | 2019.08.01 |
---|---|
티스토리 검색엔진 최적화하기 - 구글 서치콘솔에 사이트맵 등록하기 (0) | 2019.07.31 |
티스토리 검색엔진 최적화하기 - 구글 서치콘솔 등록하기 (0) | 2019.07.31 |
'Google 지도를 제대로 로드할 수 없습니다.' 구글 맵 API 문제 해결 (0) | 2019.07.29 |
구글 맵 API 키 확인하기/ API를 사용할 도메인 연결하기 (0) | 2019.07.28 |
댓글