 |
| Credit: Twitter image |
Creating a full screen video can be tasking, but with these simple HTML, CSS and JavaScript codes you can chum up a fullscreen video without stress.
See below some steps as taught by ur expert:
Step 1) Add HTML
Example:
<!-- 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>
Step 2) Add 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;
}
Step 3) Add JavaScript
JavaScript can be added optionally so as to pause/play the video with a click of a button:
Example
<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>
Putting it all together
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#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;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
<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>
</body>
</html>
Source: w3school.com
![Daddy Freeze Spits Fire, "I Will Contact The UK Authorities To Stop COS Visas,....I Will Bring Nigerians Back Home En masse" [Video]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhQl3smGqUK-Q0hjDCuAQrQ4mUoG2Fb1MJFA-rmilRt2hW5hEtdAtbMRL4gEJ0OgfNdmjRFRzadOxl42B4lLSPG822-m-SrM6kFlkrKxdA2RzeWatBrJ_PQiYEc_EIYqfDI9kObVhjOgUVmT9oHkShO-myr77bblmVhDCpsUo94P6uIc98Hr0QZPDrP8/s72-w640-c-h350/Freeze.png)
!["You Insult Pastors For Collecting Money To Pray, You Too Are Charging Your Members Money To Talk About Their Problems - VeryDarkMan Drags Daddy Freeze [Video]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4NrxFzO4wG4RhUZG7I8rOj-gRfVNi7dYMGWI1t5LGgKuHXFaA6KrogS-YSPZzNo7CoQP57NKVP_6XQkGM6muHsTx9VantqiMOYGQAQ2ayWNcd9xT8CFAOf4IhMm3Fj059uuX34KvXogoDLo6mQAhmnugDPCCKkw5xN4nryjJQsebkzJscktwg4l1dCVM/s72-w640-c-h320/VDM+Freeze.png)
![Social Media On Fire: Users Said Mercy Baby's Looks Like Nathaniel Bassey, Demands DNA [Pictures]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibxdeutUOg_KWmJrzO7VzfI6cqsdL-K1KQjA2S_iDqzb1zDdUkOyar-D_4svWX1HbDdPixy2kpOtSSDukugaDpCKU1cpl7S7ASZPGZ9CHboLRy7E_Gy2gxdGBVJQ_rCI6WYe9sDxmT1iFcmtvqK8w83_rcFbWinmdviJC7Gb0e0eHWGTc4NIkAXZFOkHE/s72-w640-c-h294/N+Me.png)
No comments:
Post a Comment