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.

Unfortunately, on mobile, the video will not work. For Hestia PRO, we are using WordPress's core Header Video functionality which is designed not to work on mobile devices. By default, the video header only loads for displays that are at least 900 pixels wide and 500 pixels tall. On smaller displays, the fallback image will be displayed. That fallback image can be added/changed from Appearance > Customize > Header Options > Header Settings > Header Image.

Some workarounds

A. If you want a workaround, one of our users mentioned to us that he ended up using https://ezgif.com/video-to-gif to convert his short 27s video into a GIF and then used that as his default image fallback. ( Something to note, when doing this you have to make sure Wordpress DOES NOT crop the image. If it gets cropped, it will be converted into the wrong file format. Also you need to upload the GIF directly in the media page, then use it by selecting on the header image page).

B. If you want to display a different 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');
    }
}<br>

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

<a href="http://hestia.local/wp-content/uploads/2019/03/palm-fruits.jpg">http://hestia.local/wp-content/uploads/2019/03/palm-fruits.jpg</a>

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.