create full screen video using html and css
<html>
<body>
<style>
/* video: 100% width and height- cover the entire window */
#myVideo {
position: fixed;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
}
/* Add 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 */
#abcbutton {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#abcbutton:hover {
background: #ddd;
color: black;
}
</style>
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="hello.mp4" type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
<h1>Sample Text</h1>
<p>Learn with Mayur Infosys Solutions</p>
<button id="abcbutton" onclick="myFunction()">Pause</button>
</div>
</body>
</html>
above code in html and css which works on all devices, while creating webpage required full screen in these case use above sample code.
1)we set video to position fixed
2)all corner zero position , no padding
3) content also fixed and set to bottom position.
please comment if any query OR suggest new topic for blog.
No comments:
Post a Comment