Header video with image slider fallback?

Hello,
I set a video as header.
Now I was wondering if it’s possible to have this video replaced on mobile devices by the image slide show.
Is this possible?
Thank you.

Hello there,

Not sure if there is an easy way to achieve it. But, what about enabling a static header image on mobile? Try adding this CSS code to Appearance > Customize > Additional CSS from your site dashboard.


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

    /* Remove video header */
    .wp-custom-header video,
    .wp-custom-header .wp-custom-header-video-button {
      opacity: 0;
    }

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

Replace http://yoursite.com/path/to/image.jpg in the code above with your image URL path. You’ll need to upload it first to the media library (Dashboard > Media > Add New).

Regards,
Kharis

I believe it would work if the slider-code wasn’t gone when a video is set.
Now only that single-image-solution works.

Thank you very much for your help.

Hi Kharis,

The above code works good - But in the mobile view, how do i switch between full screen and mobile responsive for the image… ?

Try replacing this line:

background-size: cover;

to:

background-size: contain;

Regards,
Kharis