HTML5 video — 전체화면 배경 동영상 완전 정리

 

 

Web Development · HTML5 Video

HTML5 video —
전체화면 배경 동영상

랜딩 페이지에서 흔히 보이는 풀스크린 비디오 배경 패턴

시작 오늘 분석할 코드

video를 화면 전체 배경으로 깔고, 그 위에 텍스트를 올린 패턴. 핵심은 position: fixed + min-width/min-height: 100% + z-index: -100 조합.

<style> #bg { position: fixed; left: 0; top: 0; width: auto; height: auto; min-width: 100%; min-height: 100%; z-index: -100; /* 본문 뒤로 */ background: url(images/flame.jpg) left top no-repeat; background-size: cover; } </style> <video src="media/flame.mp4" autoplay loop muted /* muted 필수 */ poster="images/flame.jpg" /* 로딩 전 이미지 */ id="bg"></video> <div id="container"> <h2>사람을 구체적으로 도와주는 책</h2> <h1><a href="http://www.easyspub.co.kr">이지스퍼블리싱</a></h1> </div>

실제 출력 미리보기

사람을 구체적으로 도와주는 책

이지스퍼블리싱

용어 용어 정리

<video>HTML5 표준 비디오 태그

poster비디오 로딩 전·일시정지 시 이미지

muted소거 — autoplay 차단 우회 필수

position: fixed화면(viewport) 기준 고정

z-index: -100매우 뒤로 — 본문 뒤로 보냄

min-width: 100%화면보다 작아질 수 없음 — 항상 가득

background fallback동영상 못 받았을 때 이미지로

---

1 풀스크린 비디오의 4가지 핵심

속성	역할
position: fixed	스크롤해도 항상 화면을 덮음
min-width/height: 100%	화면 크기에 맞춰 비디오가 늘어남 (잘리더라도)
z-index: -100	다른 모든 콘텐츠 뒤로 보냄
autoplay loop muted	자동 + 반복 + 소거 (브라우저 통과)

---

2 poster의 역할

poster는 비디오가 로딩되기 전 또는 정지 상태에서 보여줄 이미지를 지정한다. 큰 비디오 파일이 다운로드되는 동안 빈 화면이 안 보이게 해준다.

사용자 페이지 진입 ↓ [poster 이미지 표시] ← flame.jpg ↓ (비디오 다운로드) [비디오 재생 시작] ← flame.mp4 → 사용자는 빈 화면을 안 봐서 UX 좋음

---

3 z-index: -100과 fixed의 관계

z축 (앞 → 뒤) [container] z-index: auto ← 본문 텍스트 ↑ [비디오] z-index: -100 ← 매우 뒤 ↑ [페이지 배경] ← 가장 뒤

※ 함정 — body에 background

• z-index가 음수여도 비디오는 요소 안에서 가장 뒤일 뿐
• body 자체의 background보다는 위에 있다
• body에 어두운 배경 깔면 비디오가 그 위에 잘 보임

---

 

반응형

 

4 배경 fallback 두 단계

이 코드는 비디오 로딩 실패에 대비해 3중 fallback을 갖췄다.

순위	표시	경우
1	비디오 (flame.mp4)	정상
2	poster (flame.jpg)	비디오 로딩 중
3	CSS background (flame.jpg)	비디오 태그 자체가 못 읽힐 때

---

5 모바일에서의 차이

데스크톱

muted autoplay 거의 항상 동작. 풀스크린 비디오 자연스럽게 재생.

모바일

데이터 절약 정책으로 차단되기도. playsinline 추가 필요 (iOS).

/* iOS 모바일에서도 풀스크린 안 가게 인라인 재생 */ <video autoplay loop muted playsinline src="..."></video>

---

6 자주 하는 실수

실수	증상	해결
muted 누락	autoplay 차단	풀스크린 배경은 항상 muted
poster 누락	로딩 중 빈 화면	poster에 첫 프레임 같은 이미지
iOS에서 풀스크린 모드 자동 진입	UX 깨짐	playsinline 추가
큰 비디오 파일	모바일에서 데이터 폭주	모바일 감지 후 이미지로 대체
비디오만 두고 텍스트 z-index 누락	텍스트가 비디오 뒤로	텍스트는 z-index: 1 또는 position: relative

---

핵심 한 줄 요약

풀스크린 비디오position: fixed + min-w/h: 100% + z-index: -100

muted 필수autoplay 차단 우회

poster로딩 중·정지 상태에 보여줄 이미지

3중 fallbackvideo → poster → background-image

iOSplaysinline 추가로 인라인 재생

Tags

#HTML5 #video #autoplay #muted #loop #poster #playsinline #전체화면배경 #풀스크린비디오 #position-fixed #z-index #hero-section #백그라운드비디오 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

HTML5, video, autoplay, muted, loop, poster, playsinline, 전체화면배경, 풀스크린비디오, position-fixed, z-index, hero-section, 백그라운드비디오, 웹개발, HTML, 티스토리