Video mp4 in Section background not centring on mobile and tablet view

[alandoyle]

Hi,

I have a video mp4 place in Section background layer (Source URL from media) not centring on mobile and tablet views (or anything in between). I tried to use this code in the CSS Customise area for the Section but it doen;t fix the issue.

.video-bg {
left: 50% !important;
transform: translateX(-50%) !important;
}

Can you tell me what I need to do to get the video to centre on all devices? (It seems to be aligned left by default)

[prakash_s]

Hello @alandoyle,

Thanks for writing to us.

I tried to access your site dashboard but the given login details are not working please recheck and send us again.

Thanks

[alandoyle]

Oh, strange. I’ve sent you a new on in the secure note. Thanks.

[Ismael]

Thank you for the info.

We added this code in the Custom Code > Global CSS field:

.x-video .x-video-inner embed, .x-video .x-video-inner iframe, .x-video .x-video-inner img, .x-video .x-video-inner object, .x-video .x-video-inner video {
	left: 50% !important;
	transform: translateX(-50%);
}

If you need help with this type of modification, please check out our One service.

Warm regards.

[alandoyle]

Thanks a mill Ismael - really appreciate the code.

This works perfectly on desktop and when I click between viewports. However, it does not work on an actual iPhone. I cleared the iPhone’s Safari cache but the video is still aligned left. Any suggestions of how to fix this?

Thanks again

[seofreelance]

Hi @alandoyle,

I had also a background video with that problem, not centered in general.
Theme.co team gave me this hack and it did the job at first attempt:

/* center hero background video */
.x-mejs { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

Maybe this solves also your case.

Have a nice wekend

[alandoyle]

Thanks You fore helping out here. I popped that in to the global CSS and unfortunately it didn’t work. Should it go somewhere else?

Thanks mill seofreelance.

[seofreelance]

Should do, there at Global. Always depending on where you plan to display that bg video, but you know how this works. You can see my business case at https://motocono.com/en/ It should be ok, I have no complaints but you may find that I’m failing too! I’m not Apple fan I use simulators, of course.

Before the hack, the laser cutter went out of sight for mobile, now the main object is always on screen no matter the viewport.

From my experience with Cornerstone/PRO, sometimes it is us overengineering.
When things go messy I tend to set things off and let the framework handle with near defaults.
It is a few times, but uses to fix weird things.

Can’t do more than advising triple check for rogue margins, % instead of px, missing classes, and all those human errors.

Good luck!

[ruenel]

Hey @alandoyle,

Your video is already centered on my end:

It seems that you have inserted the CSS code correctly.

@seofreelance:
Thanks for chiming in! We really appreciate it.

[alandoyle]

Yeah. No matter how often I cleared the cache etc. it wouldn’t centre the video. I left it and came back a couple of hours later and it was centred! No idea why this would happen.

Anyway, thanks again for all the help.

[prakash_s]

You are most welcome @alandoyle