Video responsiveness

Hello!

Im working on my portfolio websites and i would like to show some short videos of interactions in prototypes of different designs. But my plan doesn’t allow me to upload big files, or i can only use background videos.

Right now on this page im using a background video, but the way it responds is very weird and i dont know how to fix it. Back in wordpress i used to do it like this, but webflow does not allow it this way…

Thanks in advance


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

Hi Edward,

I’m hoping to get a better idea of the problem and how things should look when fixed. The video right now looks like it’s getting trimmed off at the sides but in the editor if looks like you’ve tried to make into a square.

I guess I’m trying to ask, should the video look like the square and cut off the sides or should the whole video be visible?

I look forward to your reply.

Best,

Jeff

Hi Jeff!
Thanks for the swift response. No it should not cut of to a square, an image on my homepage would be a good example of how i would like to scale it.

ewarddevos.nl

No worries. I am so sorry too, I just realized I misspelled your name.

Yeah, background videos can be difficult to get to display right because they’re designed to have the content overflow.

The only workaround I’ve found is by setting a fixed height and width based on the same variable. I’d use the VH (Viewport height) for both the height and width. I think that should work but test it to make sure.

Testing on your site, I’d say - go to your background pic, reset the margin, and all of the size settings. Then, change “Width to 55VH” and “Hight to 30VH” - and I think it looks good. - It will probably need to be adjusted for each screen size but as long as both height and width are set off of the same thing, you should be good.

The background video settings should look like this when done:

Hope that helps!

Thanks Jeff!

Sorry for the mega late response, very busy weeks and moved from one country to another. Going to give it a go right in a few minutes. That’s amazing it works very well! my gratitude is big

1 Like

No worries, hope the move went well!

-Jeff