Hi, I'm going to need lots of help :)

Okay :slight_smile: Try giving the Columns a height of 300px. The make the video position: relative with a width of 100%

Thanks Nicole. I have done this, but the video is no longer showing up… Where did it go?

Sorry, also make the video’s height: auto :slight_smile: You have it set on 0px.

Thanks Nicole, that worked, but the video is not playing on mobile when I go to preview it… Why is that?

Also, the video has disappeared from the mobile landscape even though I have put in the same settings… :frowning: :persevere:

Aaaand, lastly, the video seems to be zoomed in on tablet and mobile, and I need it to not do that, it should display as much of the “image” as possible. How do I do that?

When I changed the Flex Direction of the video element to Horizontal instead of Vertical the column shows on rotated mobile.

Regarding the ‘zoom’ - this is directly related to the height of the object. Reducing this height will reduce the zoom; it’s keeping the image perspective, so if you increase the height of the container it will zoom in to retain a ‘good’ view of the image.

You need to make sure that you change the parent container from “Static” to “Relative” positioning, otherwise the Absolutely-positioned container won’t know where to go.

Thanks everyone for your help.

I solved most of the issues, but I still don’t understand why the video is playing on desktop and tablet, but not on mobile landscape and portrait.

Why is this?

Something I did find was: “background videos may not autoplay on touch devices if a site visitor has enabled data saver.” :slight_smile: Perhaps that could be the problem? I will look into it some more and let you know if I figure anything out.

Happy Webflowing!

These may be helpful:

That’s great, thanks a lot. I will try it, but where do I edit the code? I can’t seem to access the code anywhere…

Thanks

Good morning. Please help: where do I actually paste the code? And I don’t mean where IN the code, but how do I access the code from the Webflow designer?

Thanks!

Hello :slight_smile: These links should give you all the information needed to insert code into Webflow.

Hello Nicole

Thanks for this. It still doesn’t specify where I go to access the code. I cannot find it anywhere in the interface. Is it on the left side? Right side? Do I right-click the video and select Inspect Element and edit there maybe?

Hello again.

So I think I managed to put the code in by going into project settings and custom code. However it didn’t work.

Problem 1: Video is still not playing on mobile. How can I make a background video autoplay on mobile, Webflow?

Problem 2: The video gets cropped on tablet view. Whyyyyy…

See screen recording of problem 1 and 2: https://we.tl/t-chGNQIKAzI

I am getting very frustrated, Webflow. I have just started the homepage, and have not even began the rest of the site, and this makes me just want to give up :frowning: :hot_face:

Have you tried inserting that snippet of code into the page settings in the “before the </body>” section? It’s the second custom code box in your page settings.

See screenshot:

Have you tried publishing your site and testing it on mobile?

I will look have another look to see why your video is being cropped in tablet view.

See the screenshots below on how to set up your divs so that your video doesn’t get cropped on tablet view.

Setup for Columnvideo:

Setup for Background Video 2:

Thanks Nicole, I had no idea where to find the body code, so thanks. Video is playing on mobile, when I open up the website on my phone, but it is not playing in the designer. Anyways, it’s working!

Aaaand I changed the settings on the tablet video so it’s no longer cropping.

Thanks for saving my day @Nicole_Klaver :clap:

Must say tho, Webflow, you don’t make it very intuitive…

Kristine

1 Like

I’m glad I could help :slight_smile:

Just to note for future: custom code will not show up in preview, it will only work & be visible if you view it on a published site.

The more you play around with Webflow the easier it will become. It took me a long time to get where I am today. Luckily their website, youtube channel, and a whole lot of other resources - like the Webflow showcase - make it easy to find the answers you’re looking for.

Good luck finishing your website. Just shout if you need assistance with anything else :slight_smile:

Will do. Thanks again, @Nicole_Klaver really appreciate it!

1 Like

Hello there! :slight_smile: Just wanted to chime in with a recent discovery I’ve made relating to iOS and background video autoplay.

If your iOS device has Low Power Mode turned on, background videos will not autoplay. I have not found any work around for this, other than to turn off Low Power Mode.