How to display an image instead of the video on mobile in Hestia

Hestia Pro has an option to display a video as the background for the Big Title/Slider section. On mobile devices(mobile, tablet) the video is not playing. This is WordPress default behavior, we didn't make it like this on purpose in the theme.
A solution for this would be to display an image instead of the video, on mobile devices. This can be achieved in only two steps.

1. Add a code snippet

This can be achieved by copying the following code and paste it into your site Dashboard->Appearance->Customize->Additional CSS.

@media (max-width: 899px) {
    .home .header-filter {
        background-image: url('http://hestia.local/wp-content/uploads/2019/03/palm-fruits.jpg');
    }
}

2. Update image source

Now, you have to replace the image source, which is on the third line in the code above, between url quotes. So in this case, the image source is

http://hestia.local/wp-content/uploads/2019/03/palm-fruits.jpg

In order to get the correct source for an image on your site, navigate from your Dashboard to Media Library, click on the desired image and copy the URL. Then paste it between the quotes like in the code above. Don't forget to click Publish in the customizer.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.