Need help to make video responsive on different browser sizes

Design help General
1

Hello to all!
I am new here and just finished to work on site, it looks great in general except main video frame at top home.
When site opened at FHD screen, home page looks good, but when I make browser smaller all goes wrong(((.
Can you please help me to make video and text on top of it responsive?
Actually I have only 2 question:

  1. How to make video scale 100% by 100%? I have currently width 100% and it works perfect, but when I change browser width video cuts from bottom. How can I avoid bottom cut? (tried height:100% it doesn’t work)?
  2. How can I keep text inside video frame? Now it looks perfect at FHD, but at small screen text goes below video.

Here is my public share link: LINK
(how to access public share link)

2

Здравствуйте Дима.

Can you please update your site with a correct read only link… It would help us resolve you problem much quicker. Thanks!

3

Sorry for mistake, fixed link, hope it’s correct now.

4

It’s correct, will take a look at it now… :+1:

5

For #1, in video height type in 100VH.

6

For #2 I can’t view your site (I am on iPhone) but from what I imagine you have a fixed px value… Try making it a VH value as well and set it where you want it and see if it works. Contact me if you need more help. :wink:

7

I added height:100VH via style, looks like video now works correct, but now grey block goes at the bottom of video and text instead of to be on top of video goes below grey block(((

8

You can learn about positioning here

Use video background element instead of embed element. Check the webflow tutorial

1 Like
9

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