I created a sleek jumbotron design with a video background, but for some reason, the video isn't playing. I have no trouble loading the video from a URL separately, so I'm stumped as to what's causing the problem.
Here's the simple HTML setup:
<div class="jumbotron homehero">
<div class="container">
<div class="row">
<div class="col-md-6">
Content for the left column goes here
</div>
<div class="col-md-6">
Content for the right column goes here
</div>
</div>
</div>
</div>
Here's the accompanying CSS:
.jumbotron.homehero {
background-image: url('https://phasefivemedia.com/external/video_bg_1080.mp4');
background-size: cover;
background-color: yellow;
height: 400px;
}
Any ideas why the video isn't playing? Appreciate any help!
Check out the code on CodePen: https://codepen.io/SimplyMarkB/pen/WNgweoV