Background video in header showing watermark on Mobile device

[dmacoxford]

We have an mp4 video playing in the background of a header. All working fine on pc, ipad etc. but on mobile Iphone x the video has a watermark showing on there which is not showing on the other platforms.

http://www.truleaf.co.uk

Open to any suggestions

[jade]

Hello @dmacoxford,

Please note that this is more of a mobile browser restriction rather than a theme issue. Mobile browser uses a poster image all a fallback instead of the video background because videos use more mobile data which is heavy for the users.

Kindly set the poster image instead in the settings so that it will be what is displayed when the site is opened on mobile:

Hope this explains it.

[dmacoxford]

The video runs it just has a watermark on there from shutterstock where the original video was purchased. Happy to put a poster image there but if the clients wants the video how do we get rid of the watermark?

[jade]

Hello @dmacoxford,

Is there no chance that you could use the video file version without the watermark since the video you are using a purchased video? The current background video has the watermark which is what you are seeing. That would be the easiest way since the video background also scales automatically depending on the screen width the site is viewed on.

Another workaround that you can try it to add this code in the Element CSS of the bar where you have the video background:

@media (max-width: 480px) {
    $el .x-bg .x-bg-layer-lower-video .x-video {
        position: relative;
        top: 54px;
    }
}

You might need to change the top value in the code.

Element CSS | Themeco Docs

Hope this helps.

[dmacoxford]

We are using the version without the watermark, as I said it is all fine on the other devises there is no watermark, it is just on mobile devices. The Code within the element css does not work, if we use this without the poster image the area is now blank.

[nabeel]

Hey @dmacoxford,

I checked your site in mobile devices and instead of video i’m seeing the poster image, please note that the background videos are disabled in mobile devices by default that’s why you are seeing a blank area when you remove the poster image so you need to keep the poster image.

Hope this helps!