Background upper layer disappears in Safari

Support
#1

My front page in x - pro has a header with a bar that has a lower background video layer with a upper background image overlaid. This works fine on Chrome/IE etc. However when playing back on Safari, the image overlay fades off as the video starts, for no reason.

See the header in question here: http://www.red90.co.uk/

Also, I have seen the responses regarding auto playing video on mobile devices - surely there must be some token or way to override this, if connected via wi-fi etc? My clients are looking at our website because of the video content…

Thanks

#2

Hello There,

Thanks for writing in! The lower background image is not displaying in Safari. I saw the issue in my Safari. To resolve this issue in Safari, Please click the CSS button (http://prntscr.com/gpqhzs) and insert this following code:

.x-bg .x-bg-layer.x-bg-layer-image {
    z-index: 0;
}

By default, the video in smaller devices or mobile devices were automatically gets deactivated. Videos are bandwidth extensive and could eat up all the bandwidth while loading your site. This is why it is disabled. The best thing to do when using a background video is also to insert a video poster so that this will display as a replacement of the video in smaller screens or mobile devices.

Hope this helps.

#3

Brilliant. That has indeed fixed the Safari issue.

I appreciate the issues with the bandwidth on mobile devices when on a mobile network (although that seems to be a rather out-of-date restriction these days). I was wondering if there was a token that differentiates between being on wifi/broadband as opposed to being on mobile networks.

I run a video production company, so it’s pretty much essential that it is a video that plays, rather than the poster image, when possible, so this is a highly restrictive issue for my needs.

#4

I’ll start a new topic regarding the video auto-play issue as I have a question regarding something I found with IOs 10

Thanks again for the help

#5

You’re most welcome.
Glad we are able to help you.

#6

Hi @ruenel, I am having the same issue with my webm video not playing on safari (even though it plays on chrome). I can tell the upper layer is visible on safari when I change the color of it. I used the code you provided and I couldn’t get it to work. Could you take a look, please? http://talkingtreehill.co.nz/home/

#7

Hello @arensbpa,

Thanks for updating this thread. Please be advised that at present Safari doesn’t support WebM video format. Other browsers do support this format.

It is best that you convert your video to .mp4. You can use handbrake.fr to convert your video.

Kindly let us know how it goes.