Here is the CSS code snippet that I'm having trouble with:
.masthead {
position: relative;
width: 100%;
height: auto;
min-height: 35rem;
padding: 15rem 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%,
#000000 100%), url("/assets/img/header_flow.gif");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
I want to change the GIF image to an mp4 video, but it only works in Safari browser. It seems to be looking for an IMG attribute somewhere...
Is there a trick to make this work without completely rewriting the website using HTML video tags?
Edit:
I managed to solve it by adding the following code in my HTML:
<header class="masthead">
<div class="video-bg">
<video muted autoplay loop source src="/assets/vid/video.webm" type="video/webm"></video>
</div>
<div class="overlay"></div>
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Title</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">Subtitle</h2>
<a class="btn btn-primary js-scroll-trigger" href="#contactus">Contact</a>
</div>
</div>
</header>
However, I believe there should be a way to achieve this in CSS with Bootstrap, as linking background files directly in CSS is more convenient.
Thank you to everyone who has responded, even if the solution provided isn't exactly what I was looking for!