Streaming live at 10am (PST)

Vertical video - can't adjust size


#1

Hi,

I’ve placed a vertical vimeo video on one of my project pages (the La Poste one), but it becomes this super long video of which I can’t seem to adjust the size. Can anyone tell me how to adjust it?

I would be eternally grateful!


Here is my site Read-Only: https://preview.webflow.com/preview/reach-7c1403?utm_source=reach-7c1403&preview=ed834e396cc5b926f25fd74da6c3ab34
([how to share your site Read-Only link][2])


#2

You can only control video height with the help of it’s width which in turn is better to set up on video’s parent. As in just use regular div as video’s parent and modify this div’s width untill video’s height is to your liking!


#3

Hi Alex,

That doesn’t work. The video just goes outside of the div or container. Can you try through my preview link? Maybe I’m doing something wrong…


#4

Just put your video element inside your newly created div block like so:

53%20PM

Now adjust this div’s width - for example, set it to 50% and you will see the results.


#5

Do not put it into a container. Use regular div.


#6

Crazy the behavior the video element has inside of a container! It gets hit by calc values for padding.


#7

Maybe this will make it clearer.

CloudApp


#8

I was surprised to see calc in video properties when examining its behaviour but yeah… I just prefer using default divs for everything omitting sections and containers. Just in case :smiley:


#9

The same :smile: Always using regular divs. Skipping the sections and containers.


#10

Or just set up your default class for each and drive your way. Then at least you pick up the visual cues in the designer.


#11

Always. That’s in all my “10 advices” posts: don’t style the container, always put a div for content inside of a container.

Have you tried to Flex a container and then spread the content horizontally? :slight_smile:


#12

As long as you put a div inside of each of them for content. The main struggle with Containers and Sections is that you can’t nest them, so down the road, you can’t grab and paste. Also the Section element isn’t a HTML5 section. I like very much that Webflow is proposing a straight forward way to sectionned design: section then container then content and repeat, but we could use another vocabulary for Sections. (because HTML5 sections use is more complex than what a Webflow section is)


#13

Thanks guys! That worked.