[Resolved] Different header background video on mobile – second topic

[Ighty]

reference original topic

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

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

It would be great if you could add the image – then I can write up some CSS for you 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ighty]

Image added 🙂

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ighty]

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.

[Tom]

Is the background overlay set in your options?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ighty]

No, it wasn’t set.

Now it’s activated, I see the video both on mobile and desktop with the light overlay.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ighty]

Now it’s perfect!
Thanks

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts