See The Stillery Website https://stillery.jlb.webservice.team/
This works on Mac, iPhone, PC
This is a hero video with gradient overlays.
This code ensures that on load you see the fallback image instead of the gradient AND that the gradient is ok on Mac
CSS
/* *****************************
* HERO VIDEO BACKGROUND
* *************************** */
.hero {
position: relative;
}
.hero .elementor-background-video-container {
position: relative;
z-index: 0;
}
.hero .elementor-background-video-hosted {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
}
.hero.video-loaded .elementor-background-video-hosted {
opacity: 1;
}
.hero .elementor-background-video-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #755339 20%, #ffffff 50%, #755339 70%, #160e08 90%, #000000 100%);
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.5s ease;
}
.hero.video-loaded .elementor-background-video-container::after {
opacity: 1;
}
.hero-video-content-wrapper {
position: relative;
z-index: 2;
}
JS - add outside });//close all jquery
// HERO VIDEO WITH FALLBACK IMAGE
document.addEventListener('DOMContentLoaded', function() {
const video = document.querySelector('.hero .elementor-background-video-hosted');
const hero = document.querySelector('.hero');
if (video) {
video.addEventListener('loadeddata', function() {
hero.classList.add('video-loaded');
});
}
});