웹 페이지에 몰입감을 더하고 싶다면 CSS를 활용한 전체 화면(fullscreen) 비디오 배경이 효과적인 방법입니다. 이 글에서는 HTML과 CSS, 그리고 약간의 자바스크립트를 사용하여 화면 전체를 채우는 비디오 배경을 만드는 과정을 단계별로 소개합니다.
CSS 전체 화면 비디오 배경 예제 코드
아래 코드는 브라우저 창 전체를 덮는 비디오 배경과 함께, 하단에 반투명 콘텐츠 영역과 재생/일시정지 버튼을 포함한 완성된 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
}
.backgroundVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.playPauseBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: rgb(72, 22, 167);
color: #fff;
cursor: pointer;
opacity: 0.8;
}
.playPauseBtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<video autoplay muted loop class="backgroundVideo">
<source
src="https://cdn.videvo.net/videvo_files/video/free/2019-
05/small_watermarked/190416_10_Drone1_04_preview.webm"
type="video/mp4"/>
</video>
<div class="content">
<h1>Heading</h1>
<h2>Some Sample text</h2>
<button class="playPauseBtn">Pause</button>
</div>
<script>
document.querySelector(".playPauseBtn").addEventListener("click", toggleVideo);
var video = document.querySelector(".backgroundVideo");
var btn = document.querySelector(".playPauseBtn");
function toggleVideo() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
}
else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
</body>
</html>
핵심 CSS 속성 살펴보기
이 코드가 정상적으로 작동하는 원리를 이해하려면 몇 가지 중요한 스타일 속성을 짚어볼 필요가 있습니다.
- position: fixed; − 비디오를 화면 기준으로 고정시켜 스크롤과 무관하게 항상 배경에 유지되도록 합니다.
- min-width: 100%; min-height: 100%; − 어떤 화면 크기에서도 비디오가 최소한 뷰포트 전체를 덮도록 보장합니다.
- right: 0; bottom: 0; − 비디오를 화면 우측 하단에 고정하여 넘치는 부분이 잘리더라도 균형 있게 표시됩니다.
- background: rgba(0, 0, 0, 0.5); − 콘텐츠 오버레이에 반투명 검정 배경을 적용해 텍스트 가독성을 높입니다.
video 태그 속성의 역할
<video> 요소에 사용된 세 가지 속성도 중요한 역할을 합니다.
- autoplay − 페이지가 로드되면 비디오가 자동으로 재생됩니다.
- muted − 음소거 상태로 설정해야 대부분의 브라우저에서 자동 재생이 허용됩니다.
- loop − 비디오가 끝나면 다시 처음부터 반복 재생됩니다.
재생/일시정지 버튼 동작 원리
예제에는 간단한 자바스크립트 함수인 toggleVideo()가 포함되어 있습니다. 버튼을 클릭하면 video.paused 상태를 확인하여 비디오를 재생하거나 일시정지하고, 버튼의 텍스트도 그에 맞게 변경됩니다. 이를 통해 사용자가 배경 비디오를 직접 제어할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
