Cách thực hiện - Video toàn màn hình
Tìm hiểu cách tạo nền video toàn màn hình bằng CSS.
Nền video toàn màn hình
Tìm hiểu cách tạo nền video toàn màn hình bao phủ toàn bộ cửa sổ trình duyệt:
Cách tạo video toàn màn hình
Bước 1) Thêm HTML:
Thí dụ
<!-- 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>
Bước 2) Thêm CSS:
Thí dụ
/* 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;
}
Bước 3) Thêm JavaScript:
Theo tùy chọn, bạn có thể thêm JavaScript để tạm dừng / phát video bằng một lần nhấp vào nút:
Thí dụ
<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>