Play mp4 in a mobile browser
December 29, 2018
Responsive Youtube iframe in HTML
January 14, 2019
Show all

Create Video banner

CSS
HTML
.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>

Comments are closed.