Video Background Crop Mobile

Will_Loveland · October 19, 2018, 8:02pm

Hi

I am creating a hero section that has a background video. Everything is working fine apart from on mobile. The site loads fine, however if I pinch and zoom out I have can see the entire background video being played, which makes for quite a weird scrolling affect. I have an image below which demonstrates the problem, better than I have explained it! Any help would be much appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

donaldsv · October 19, 2018, 10:31pm

Hi @Will_Loveland

Can you please share your read-only link?

Will_Loveland · October 19, 2018, 10:33pm

Thanks for the response, here is a link https://preview.webflow.com/preview/movement-labs-c4365c?utm_source=movement-labs-c4365c&preview=e08beb481c7dffd5a20481a8b5c1cfed

donaldsv · October 19, 2018, 10:36pm

Thanks! I can’t see the issue on my end, but can you try to give the following settings to the background video element?

https://cl.ly/e8ae82

Will_Loveland · October 19, 2018, 10:41pm

Gave it a go but its still the same unfortunately. Its only when you view it in browser (using inspect) or on a device that it happens. The webflow preview makes everything look dandy

donaldsv · October 19, 2018, 10:42pm

Can you share the live site link

Will_Loveland · October 19, 2018, 10:43pm

Sure! Thanks again for your help http://movement-labs-c4365c.webflow.io/

donaldsv · October 20, 2018, 12:31am

Can you try to put the background video into a div and set it to overflow hidden?

Will_Loveland · October 20, 2018, 9:18am

Still no luck. It is still showing outside the bounds on mobile

donaldsv · October 20, 2018, 1:14pm

Here’s the workaround

Will_Loveland · October 20, 2018, 1:16pm

@donaldsv You sir are a hero! Thanks so much for that and all your help!