Header video for desktop view and different header image for mobile view

#1

Hi,

As we know that Header Video is not working on mobile view (Astrid theme). Can I use a header video for desktop view and a different header image for mobile view? At the same time?

Please advice.

Thanks
Sadab

Header Video is not working on Mobile
#2

Hello Sadab,

I believe it only happens on iOS devices which disallow auto-played video due to bandwidth consideration. Please refer to this post:

To alter it with an image of your choice, you could use this CSS code:

    @media only screen and (max-device-width: 1024px) {

      .wp-custom-header {
        background-image: url('https://yoursite.com/path/to/image.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .wp-custom-header > *{
        opacity: 0;
      }

    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

#3

Hello Kharis,

Thanks so much. It works. :slight_smile:

#4

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis