동영상을 배경으로 사용하는 방법
동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다.
예제
다음은 동영상을 배경으로한 간단한 예제입니다.
<div class="bg">
<video muted autoplay loop>
<source src="//bit.ly/3kYMF9A" type="video/mp4">
</video>
<div class="text">
<p>Lorem Ipsum Dolor</p>
</div>
</div>
body {
padding: 0px;
margin: 0px;
}
.bg {
width: 100%;
height: 400px;
overflow: hidden;
margin: 0px auto;
position: relative;
}
video {
width: 100%;
}
.text {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.text p {
text-align: center;
font-size: 48px;
color: #ffffff;
}
예제로 사용한 동영상
예제에서 사용한 동영상은 Pixabay에서 구했습니다.
상업적으로 사용 가능하고, 출처 표시를 하지 않아도 됩니다.
https://pixabay.com/videos/network-loop-energy-technology-12716/
분석
<video>
태그로 동영상을 넣습니다.
동영상 위에 들어갈 텍스트를 만들고 div 태그로 묶습니다.
<div class="bg">
<video muted autoplay loop>
<source src="//bit.ly/3kYMF9A" type="video/mp4">
</video>
<div class="text">
<p>Lorem Ipsum Dolor</p>
</div>
</div>
- 웹페이지에 여백이 없게 만듭니다.
body {
padding: 0px;
margin: 0px;
}
- 동영상이 정해진 높이를 벗어나면 보이지 않도록 overflow 속성을 정합니다.
- 텍스트를 동영상 위에 올릴 수 있도록 position 속성을 설정합니다.
.bg {
width: 100%;
height: 400px;
overflow: hidden;
margin: 0px auto;
position: relative;
}
- 동영상이 좌우로 가득차게 나오도록 width를 정합니다.
video {
width: 100%;
}
- 텍스트가 동영상 가운데로 오도록 position 속성을 정합니다.
.text {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
- 텍스트를 세로 가운데로 위치하게 조정하고, 모양을 정합니다.
.text p {
text-align: center;
font-size: 48px;
color: #ffffff;
}