Play mp4 in a mobile browser
December 29, 2018Responsive Youtube iframe in HTML
January 14, 2019
.bw-mainBaner {
overflow: hidden;
}
.bw-mainBaner .container-wrp {
position: relative;
z-index: 1;
}
.bw-mainBaner video {
display: block;
height: 100%;
left: 0px;
object-fit: cover;
position: absolute;
top: 0px;
width: 100%;
}
.home .bw-mainBaner {
min-height: 660px;
height: 75vh !important;
}
<!-- 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>