CSS / 동영상을 배경으로 사용하는 방법

동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다. 단, 네트워크 속도가 느리거나 컴퓨터 사양이 좋지 않거나 구 버전의 웹브라우저를 사용하면 문제가 생길 수 있으니, 신중히 결정하는 것이 좋습니다.

예제로 사용한 동영상

예제에서 사용한 동영상은 Pixabay에서 구했습니다. 상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다.

https://pixabay.com/videos/network-loop-energy-technology-12716/

전체 코드와 결과

다음은 간단하게 만든 예제의 전체 코드입니다. 동영상 파일은 videos 폴더에 넣었다고 가정하겠습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body { padding: 0px; margin: 0px; }
      .jb-box { width: 100%; height: 500px; overflow: hidden;margin: 0px auto; position: relative; }
      video { width: 100%; }
      .jb-text { position: absolute; top: 50%; width: 100%; }
      .jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <video muted autoplay loop>
        <source src="videos/Network.mp4" type="video/mp4">
        <strong>Your browser does not support the video tag.</strong>
      </video>
      <div class="jb-text">
        <p>Lorem Ipsum Dolor</p>
      </div>
    </div>
  </body>
</html>

결과는 다음과 같습니다.

분석

코드를 하나하나 분석해보겠습니다.

<div class="jb-box">
  <video muted autoplay loop>
    <source src="videos/Network.mp4" type="video/mp4">
    <strong>Your browser does not support the video tag.</strong>
  </video>
  <div class="jb-text">
    <p>Lorem Ipsum Dolor</p>
  </div>
</div>
  • video 태그로 동영상을 넣습니다. 자동으로 시작하고, 반복되도록 합니다.
  • 동영상 위에 들어갈 텍스트를 만듭니다.
  • 동영상과 텍스트를 div 태그로 묶습니다.
body { padding: 0px; margin: 0px; }
  • 웹페이지에 여백이 없게 만듭니다.
.jb-box { width: 100%; height: 500px; overflow: hidden;margin: 0px auto; position: relative; }
  • 동영상이 정해진 높이를 벗어나면 보이지 않도록 overflow 속성을 정합니다.
  • 텍스트를 동영상 위에 올릴 수 있도록 position 속성을 설정합니다.
video { width: 100%; }
  • 동영상이 좌우로 꽈 차게 나오도록 width를 정합니다.
.jb-text { position: absolute; top: 50%; width: 100%; }
  • 텍스트가 동영상 위로 올라가도록 position 속성을 정합니다.
.jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }
  • 텍스트가 세로 가운데 나오도록 의 위치를 조정하고, 모양을 정합니다.

CSS 강좌