Force header background video to not load on mobile website

[pbentoncron]

Hi,

I am using an mp4 from giphy.com for my header background video. I want to use this for my desktop version, however, it is a very heavy load on my mobile website. If possible I would like it to not load at all on mobile to lighten a load of my homepage on mobile.

Can this be done?

Thank you!

[ruenel]

Hello Philip,

Thanks for writing in! Did you added this video as a background video in your homepage section? Please include to add a poster image so that on smaller screens or mobile, the video will not load and the poster image will be displayed. Please see Video background in this documentation:

• https://theme.co/docs/creating-layouts

Hope this helps.

[pbentoncron]

Hi @ruenel,

I did add it as a video background in my homepage section. I added a poster image as well, however, it is still loading the video on my mobile site in the background.

I have included a screenshot from Google Pagespeed Insights.

Thanks!!

[ruenel]

Hello Philip,

In that case, please make use of this custom css:

@media(max-width: 767px){
    .x-bg .x-bg-layer-lower-video {
        display: none;
        height: 0;
    }
}

This code will make sure that the video will not be played in smaller screen. The result in your PageSpeed is for desktop by the way as indicated in the blue bar.

Best Regards.

[pbentoncron]

Hi @ruenel,

I really appreciate your help! Unfortunately, the custom CSS is not stopping the video from loading on mobile.

Any more thoughts?

Thank you,

Philip

[ruenel]

Hello Philip,

The background video is added to the section element in your page. Normally, on mobile, the video will not be played and the post image will be displayed. Since the video is part of the part, it will be requested to the server. Though it is requested, it is not loaded into the page.

Please keep in mind that the same page element structure content will be loaded in desktop and mobile screens. You cannot have a different page element structure content for the desktop screens and another page element structure content for the mobile screens.

Hope this explains it briefly.