동영상을 배경으로 사용하기

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

<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;
}​

위의 블로그의 내용을 참고하여 내용을 수정하고 적용함

예제는 아예 배경이 영상으로 가득차게 했지만 나는 실제로 필요한 부분만 넣고 싶어서 적절히 편집했다. 

width: 100%;, height: 400px; 값들을 주로 조절해서 사용했다.

 

 

코드로 동영상 자체를 어둡게하는 방법을 알지 못해서 영상은 직접 어둡게 수정하여 넣었다.