방법 - 전체 화면 비디오
CSS로 전체 화면 비디오 배경을 만드는 방법을 알아보세요.
전체 화면 비디오 배경
전체 브라우저 창을 덮는 전체 화면 비디오 배경을 만드는 방법을 알아보세요.
전체 화면 비디오를 만드는 방법
1단계) HTML 추가:
예시
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="rain.mp4"
type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
2단계) CSS 추가:
예시
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: fixed;
right: 0;
bottom:
0;
min-width: 100%;
min-height:
100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover
{
background: #ddd;
color: black;
}
3단계) 자바스크립트 추가:
선택적으로 JavaScript를 추가하여 버튼 클릭으로 비디오를 일시 중지/재생할 수 있습니다.
예시
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button
var
btn = document.getElementById("myBtn");
// Pause and play the
video, and change the button text
function myFunction() {
if (video.paused)
{
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>