HTML5로 웹사이트 배경에 동영상 넣는 방법 완벽 가이드

HTML5 배경 동영상 구현하기

웹사이트 배경에 동영상을 적용하면 정적인 이미지보다 훨씬 생동감 있는 첫인상을 줄 수 있습니다. HTML5의 <video> 태그를 활용하면 별도의 플러그인 없이 간단하게 전체 화면 배경 동영상을 구현할 수 있습니다.

기본 원리는 다음과 같습니다. 먼저 동영상을 재생하거나 일시정지할 수 있는 버튼을 추가하고, 동영상 요소의 높이와 너비를 100%로 설정하여 화면 전체를 덮도록 스타일링합니다.

1. HTML 마크업 작성

아래는 HTML5에서 동영상을 사이트 배경으로 설정하는 핵심 코드입니다. autoplay(자동 재생), muted(음소거), loop(반복 재생) 속성을 함께 사용해야 배경 동영상이 자연스럽게 작동합니다.

<video autoplay muted loop id="myVideo">
   <source src="demo.mp4" type="video/mp4">
   <p>사용 중인 브라우저가 HTML5 동영상을 지원하지 않습니다.</p>
</video>

참고로 대부분의 브라우저는 음소거되지 않은 동영상의 자동 재생을 차단하므로, muted 속성은 반드시 포함해야 합니다.

2. 재생/일시정지 버튼 만들기

JavaScript를 활용하면 사용자가 클릭 한 번으로 동영상을 제어할 수 있습니다. 아래 함수는 동영상이 일시정지 상태면 재생하고, 재생 중이면 일시정지하며 버튼 문구도 함께 변경합니다.

function display() {
   if (video.paused) {
      video.play();
      btn.innerHTML = "동영상 일시정지";
   } else {
      video.pause();
      btn.innerHTML = "재생";
   }
}

3. CSS로 전체 화면 채우기

마지막으로 CSS를 사용해 동영상이 브라우저 화면 전체를 덮도록 설정합니다. object-fit: cover; 속성을 사용하면 화면 비율이 달라져도 동영상이 찌그러지지 않고 자연스럽게 꽉 차게 표시됩니다.

#myVideo {
   position: fixed;
   right: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -1;
   object-fit: cover;
}

마무리

이처럼 HTML5의 <video> 태그와 약간의 JavaScript, CSS만 있으면 플러그인 없이도 세련된 배경 동영상 웹사이트를 만들 수 있습니다. 파일 용량이 큰 동영상은 페이지 로딩 속도를 저하시킬 수 있으므로, 압축된 짧은 영상을 사용하는 것이 좋습니다.