I don’t understand how the background video works.
https://preview.webflow.com/preview/guillaumes-spectacular-site-fd4aa8?utm_medium=preview_link&utm_source=designer&utm_content=guillaumes-spectacular-site-fd4aa8&preview=e71a52aee6cbc66b38188744f76268f4&workflow=preview
I just want the video fullscreen. Most importantly on 1920px and above screen resolution, but it will be nice on all resolution.
My video is 1920X1080 I don’t mind if it is pixelated on bigger resolution as long as it plays full screen.
Now the video is stretched out or zoom in if on screens above 1920px I just want it to fill the screen how hard it can be?
How come they make this so weird and confusing to make this work? I work in game engines but still I am lost with this tool.
Thanks for your help.
Stan
July 21, 2023, 7:53am
2
https://discourse.webflow.com/search?q=responsive%20video
Hi Aaron,
Sorry if it’s a noob question. I’ve just started learning Webflow.
So I looked at the linked webflow preview, and replicated the same settings. But I see no change. The video frame is still nto responsive.
I’m not sure what I am missing. Can you please explain the steps to achive this?
Thanks in advance!
The full-screen video can be done when you set element width: 100vw and height:100vh
hope this will solve your request.
Not it is what I did. I put my link so you could see my project.
Stan
July 21, 2023, 8:00am
4
hi @Guillaume_Mercier I have add screenshot make it clear.
Like I said that is exactly what I did and I don’t get the expected result.
For now I ain’t impress by this tool
And now for a reason that I doN,t understand on the default resolution it is white on the right side.
Video stretched out or something on higher resolution
Stan
July 21, 2023, 8:14am
10
give the element any id or class and give it an aspect ratio.
/* set `aspect-ratio` to element with id `bg-video` */
#bg-video{
aspect-ratio: 16/9;
}
1 Like
I put this code in the custom code… but for that I need to have paying account and I wasN’t sure to pay for this… But it looks promising. A big thanks to you sir. Much appreciated.
2 Likes
Stan
July 21, 2023, 8:32am
13
it is the element for custom code you have I think access on paid accounts. I have placed there CSS with aspect ratio to see the immediate effect but for production, code should be placed <inside head> in the page setting.
Stan
July 21, 2023, 8:40am
15
Yes, one more comment on what I see. You need only one <style></style> wrapper around all CSS code.
Stan
July 24, 2023, 7:43am
17
hi @Guillaume_Mercier it is correct if your element has an id. If you select an element by class use .
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
aspect ratio is still in red is it normal? no matter if I put an id with “#” or use the class with “.”
Stan
July 24, 2023, 6:41pm
19
hi @Guillaume_Mercier Webflow embed element is a very primitive tool with lots of limitations and a bad linter. If it is in red but aspect-ratio works do not worry about it. Bad linter is there for many years.
