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>
결과는 다음과 같습니다.
#css
25.60 GEEK