Hey guys,
I’m trying to make a video background. I already found the 2 tutorials about making a video background and mastered them more or less successfully 
My problem is, that I don’t want to have a full size video background. The width should be 100% but the height for example just 600 px. How can I achieve this?
I used the HTML5 video embed method. Hopefully someone can help me!
Thank you very much
Robin
If you apply a fixed height for the section (with overflow:hidden) holding your video embed code and then use
<video style="width: 100%, height: auto; ....... </video> it should be fine.
Wow that was easy! Thank you very much. I already tried it like this but there was some other issue I think. But now it works. Thank you very much!
Ok …one more question 
I had second thoughts…when I change the height of the section to 100vh , the video does not fill the full screen. Second try was to change the height of the video code to 100vh, but than the video will have grey bars on the side and is not filling the width. Is there a workaround for that?
And the video does not show on the ipad ?!
Yes its quite a mess with ipad, iphone etc.
There are tons of articles out there dealing with that topic.
e.g.
and so on.
I dont think that webflow can handle the unit vh correctly. If you set your body to 100% height, and set your video section also to 100% you have a “browser full height section”.
Dont know if thats working or not with the video bg but I would rather always change the section css code instead of editing the embedded video code.
Daniel
Thank you for your time. But unfortunately it does not work this way :-/ I seems that the size (the height of the vid) of the vid is limiting the height of the section. So instead of “zooming” in the vid or change the size of the video, space underneath the vid is added
https://preview.webflow.com/preview/dicoso2?preview=bcf7d4b109c4954b617e87b50749e333
Oh yeah i forgot. Of course its limited to that, youre right.
Then you have to edit the embed code. But there may be some displaying errors or misleading transforms of width and height.
p.s. removing these values on “Header Block” will play the video full height
(but its width and height proportions are a bit…well off ;P)
yeah by changing only the code this happens.
To change also the values of the block was a good a idea. I don’t know…now it seems to work?
If I am not mistaken?!
yup .
p.s. ja hätten wir so wahrscheinlich auch schneller lösen können :).
but one issue is still occuring. When the browser does not have enough width …
…a grey bar occurs underneath the video. I think there is no solution for that. So maybe its better to go with a specific height.
P.s. Ein Landsmann
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
