How to set the video in HTML background?
Video In HTML Background.
<style>
video {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.video-wrapper {
/* border: 2px solid #000; */
/* width: 400px; */
height: 780px;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.header{
position: relative;
color: white;
text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}
#myVideo {
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: relative;
background: #fe6e46;
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>
<div class="video-wrapper">
<video autoplay muted loop id="myVideo">
<source src="{{ asset('assets/1.mp4') }}" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="header">
<h1>Best SEO Company in India</h1>
<a id="myBtn" onclick="myFunction()" class="btn btn-sm font-weight-bold text-uppercase btn-outline-light rounded-0 px-5 py-3" >Pause</a>
</div>
</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>
Video In HTML Background.
No comments:
Post a Comment