Archived topic
Different header background video on mobile - second topic
9 replies · Started by Ighty on April 14, 2019
Hi Tom,
I have the following settings:
Elements (No custom image set)
<video loop muted autoplay poster="http://header-static-picture.jpg" class="background-video">
<source src="http://header-video.mp4" type="video/mp4">
</video>
<div class="background-video-content">
<h1 style="font-size:6vw;"><strong><span >TEXT</span></strong></h1>
<p style="font-size:2vw;"><span>text</span></p>
</div>CSS
/* hide video on mobile devices */
@media (max-width: 768px) {
.background-video {
display: none;
}
}
Please let me know if you want me to add the custom image. At the moment, the effect that I have on desktop is correct which is the video with a light overlay of the colour of the background (blue).
When I add the custom image in elements, the overlay is the image itself (on desktop).
Thanks
Hi there,
It would be great if you could add the image - then I can write up some CSS for you :)
Image added :)
Hi there,
edit that Header Element and add a class to the Element Classes field e.g video-hero then add this CSS:
@media (min-width: 768px) {
.video-hero {
background-image: none !important;
}
}Nope.
Now I see the video correctly on desktop, but on mobile I still see the image as a layer and no background light overlay.
Is the background overlay set in your options?
No, it wasn't set.
Now it's activated, I see the video both on mobile and desktop with the light overlay.
So remove the CSS David provided, and add this:
@media (max-width: 768px) {
video.background-video {
display: none;
}
}
@media (min-width: 769px) {
.page-hero.video-hero {
background-image: none;
}
}Then make sure your background color is set to something with a little transparency. Right now it's set to a solid #191f2f.
Now it's perfect!
Thanks
You're welcome :)
