Trying to create multiple autoplaying videos in a grid [newbie]

Design help General
1

Hi everyone,

New to Webflow, and not an engineer or designer.

I’m trying to put four videos in a page with the following properties:

  • Side by side (so small)
  • In a grid? (Not sure if that’s right)
  • Autoplay
  • Loop
  • Dynamically resize

There’s no sound to the videos. Is the best way to achieve this to use background videos?

Vimeo wouldn’t autoplay the videos, no matter how much code I put in the link about looping, autoplay, etc.

So far, I’ve got the videos in a grid, and they do autoplay, but I can’t get the proportions right.

I’ve scoured the forums and the web to try to figure this out - I’m I trying to do something that’s not possible?

Thank you!

(The grid is at the bottom of the one page in the design below.)

https://preview.webflow.com/preview/streamer-2?utm_medium=preview_link&utm_source=designer&utm_content=streamer-2&preview=6eca1a5b30d778c75a92fa126250aaa3&workflow=preview

2

Your Webflow background video approach should work fine.
I’m assuming you want a table, where each video is the same size?

A few things I can see-

  • You currently have a different class for each video with different sizes
  • Your grid has different sizes for each column

You might want to read up on CSS grids and test it out with images so that you can see the results outside of preview mode.

  • Give all of your videos the same class, and make the sizing settings consistent
  • Fix your grid so that all of the columns are 1fr, and the row height to auto.

When you want autoplay always make sure you also specify muted .

Here are a couple of very rough screenshots on some fixed-size settings that are closer to what you’ve described.

Grid-

image
image1920×953 132 KB

Videos-

image
image1920×953 178 KB

3

Thanks very much for the help, I have a version now which works on desktop.

Is there another way to size the images to that they are dynamic?

Thanks again!

4

Dynamic in what respect?