Video Background alignment

Support
#1

Hi, I have a background video loaded into a column https://explorermotorhomes.com.au/our-range/

Am I able to style the background? The video seems to be aligned Top Left and I’d like bottom Center.

THanks,
Darren.

#2

Hello Darren,

Thanks for writing in! I have inspected the page and somewhere in the minified CSS style by SiteGround, there is a CSS code that styles the vide. Please have it updated and use this:

.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 {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

I only correct the CSS code above. There should be a space when adding !important.

Kindly let us know how it goes.

#3

Ahhhh I didn’t think of the CSS being minified by siteground optimisation - thank you!!

#4

Did the job - thanks again!

I’ve uploaded the background video to the site’s media files and am accessing it through that rather than Vimeo. Should I be concerned about load speed, cross browser issues or anything in particular when using the videos this way?

#5

Hello @DesignMunky,

The background video options do not accept Vimeo links. It has to be a direct video file url like https?example.com/video-file-name.mp4.

Please make sure to use .mp4, .ogv or .webm because these the only cross-browser compatible.

Best Regards.

#6

Yes, I’m aware that it doesn’t accept Vimeo. My question was are there any load speed issues I need to be worried about if its not coming from one of the video content providers like Vimeo or Youtube?

Also, I have added a video on the homepage and it doesn’t autoplay on my iphone. It plays fine on desktop, laptop & tablet.

Any suggestions?

Thanks
Darren.

#7

Hello Darren,

Because of iOS restrictions, it will automatically disable any background video and replace it with the poster image. This is why adding a poster image is important when setting a background video. If you want to override this browser setting, perhaps this link might be able to help you:

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

With load issues, it may slow down the loading speed of the page. You may need to optimize it like using CDN or caching plugins.

Best Regards.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.