कैसे करें - फुलस्क्रीन वीडियो
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) सीएसएस जोड़ें:
उदाहरण
/* 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) जावास्क्रिप्ट जोड़ें:
वैकल्पिक रूप से, आप एक बटन के क्लिक के साथ वीडियो को रोकने/चलाने के लिए जावास्क्रिप्ट जोड़ सकते हैं:
उदाहरण
<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>