전체 화면 비디오를 만들어보세요:

CSS를 사용하여 전체 화면 비디오 배경을 만들어보세요.

전체 화면 비디오를 만들어보세요

첫 번째 단계 - HTML 추가:

<!-- 비디오 -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>
<!-- 선택 사항: 비디오를 설명하는 추가 텍스트 -->
<div class="content">
  <h1>제목</h1>
  <p>Lorem ipsum...</p>
  <!-- 버튼을 사용하여 JavaScript를 통해 비디오를 일시 중지/재생합니다 -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

두 번째 단계 - CSS 추가:

/* 비디오 스타일을 설정합니다: 100% 너비와 높이로 전체 창을 덮습니다 */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
/* 비디오/페이지 하단에 내용을 추가합니다 */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
/* 비디오 일시 중지/재생을 위해 사용되는 버튼의 스타일을 설정합니다 */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}
#myBtn:hover {
  background: #ddd;
  color: black;
}

세 번째 단계 - JavaScript 추가:

또는, JavaScript를 추가하여 버튼을 클릭하면 비디오를 일시 중지/재생할 수 있습니다:

실례

<script>
// 비디오를 가져옵니다
var video = document.getElementById("myVideo");
// 버튼을 가져옵니다
var btn = document.getElementById("myBtn");
// 일시 중지하고 재생하며 버튼 텍스트를 변경합니다
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

亲自试一试