Center background video

[markusp80]

Hi! I have a background video in the hero space of my website (www.shootit.se) that loops, and I want to center it on both desktop and mobile. I have managed to get it to cover the full height and width of both mobile and desktop, and it looks ok on desktop with the somewhat correct width of the browser, but on mobile it only shows the top left corner. I have edited the video so that “the most interesting” parts are in the middle of the video, thus it would work to crop the 16:9 video to 8:16 ratio, if the cropping is made equally from both left and right side.

I have checked this topic Center background video on desktop and mobile but I did not manage to get it to work. Where/how should I put that code? Or is there another solution?

Appreciate your help!

/Markus

[ruenel]

Hey Markus,

Thanks for writing in! After adding the custom CSS, please clear all your caches since you have installed the W3 Total Cache plugin.

• Clearing caches | Themeco Docs

Best Regards.

[markusp80]

I have done that, many times, did not manage to get it to work. But you did not answer the question on where/how to add the code from the post I linked to. Exactly where/how do I add this?

Class ID: x-video.bg

.x-video.bg { top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%,-50%) !important; -ms-transform: translate(-50%,-50%) !important; transform: translate(-50%,-50%) !important; }

Right now the CSS code is not added, and the video in the header of the start page looks like in the attached image. Please guide me how to apply the CSS properly.

[tristup]

Hi Markus,

There is no option to set background video centered on mobile. I would suggest you check the following thread and the comment from my colleague.

Align section lower backgrund video centered

Hey @ingo, We’re sorry for the confusion, the background video is not centered on mobile and that’s not a default as there’s no option to position and most mobile browsers do not allow background videos to play and it’s not good for mobile page load speed. That is the reason why there is a Poster option. Please set a poster image to replace the video on mobile. It’s best that you use a portrait-oriented image to match the aspect ratio of a phone screen. [image] Another thing about background…

Thanks

[markusp80]

Hi! Do you mean that it is not possible with an option in the user interface of the Pro theme? That might be the case, but it is definitely possible with CSS code. I just solved it myself.

My background video is now centered on both mobile and desktop, and it fills the width and the height of the browser regardless of ratio. This way, I can use the same 16:9-ratio video for both mobile and desktop, since the “most interesting” stuff in each scene is centered. Thereby, when the 16:9-ratio video gets cropped from both sides to a 9:16-ratio video, it still looks good.

I inspected the code in Chrome on my desktop and figured out which div to target, it was the div called x-mejs. Here is the code I entered into “Header CSS”:
.x-mejs {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}

You can test it yourself, start page on www.shootit.se. I have emptied all caches. See also attached screenshot from mobile before and after.

I just tried this on several different devices and it works on:

• Mac, Safari
• Mac, Chrome
• PC, Chrome
• PC, Edge
• iPhone 15 Pro, Safari
• iPhone 10, Safari

Videos on mobile give slower page load speeds, yes. But, since my website is for my company, that works with video and photography, it is kind of motivated. Hope this solution can help others as well.

[tristup]

Hi Markus,

That is what I wanted to point out. But glad to know that you are able to solve that using the custom CSS and share it with others.

Thanks