Vimeo embedding size

Hello!

I’m trying to embed a vimeo video, it’s working fine apart from one thing.
It seems I can not change the height of it.

I can alter the width, but not the height.
Right now it’s just a big square, and I want it to be rectangular.
Not sure if it’s the section that is the problem or the video itself.

Check out the site here: https://preview.webflow.com/preview/amanda-thomsson-portfolio-2-0?preview=4150fe8e5aca7f0228b533141fb45bf1
(Under the Whyred Moodfilm-page, for instance. If you scroll to the bottom of the home page you’ll find it)

If someone could check it out that would be great!

Thanks in advance.

Kindly,
Amanda

Hi Amanda,

Using the video component, the video is as large or tall as the element itself, and black bar will happen if needed.

I only see a video by the top of the page is it this one?

If you need more control, you can maybe, from vimeo, get the embed code. Click share on a video and then Show Options

http://vincent.polenordstudio.fr/snap/47ijw.jpg

Then you have plenty of things you can adjust. The dimensions etc, and also the color, here I put your signature blue as the overlay color, for example.

http://vincent.polenordstudio.fr/snap/hq413.jpg

And once you get the code you can still modify the width and height in it:

<iframe src="https://player.vimeo.com/video/212745551?color=0033e6" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/212745551">Oligarchia s01e01 - Oligorgia</a> from <a href="https://vimeo.com/user65309395">Oligarchia</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Paste the code into a custom code block and the video should appear right away in the designer.

Hello Vincent :slight_smile:

Huh, I see… wonder why that is? Most videos are rectangular?

That’s correct, the video is the one on the top.

I get it to work like you say. With the code block, just that it’s difficult to center it.
I’m using a container now, and it’s just a little off, compared to before when it didn’t budge.

And to scale it when using tablet/phone view.
Maybe I’ll have to edit the code (width) for each view to make it work?

//A

https://preview.webflow.com/preview/amanda-thomsson-portfolio-2-0?preview=20a8927a82990cb45457fdfe3769ff52

OK

This first example is the video in the container, and in the code i set the width=“100%”

http://vincent.polenordstudio.fr/snap/kajkt.jpg

This second example is the HTML custom code in a section, i set the width=“1000” and I set the section with text align center

http://vincent.polenordstudio.fr/snap/sknav.jpg

http://vincent.polenordstudio.fr/snap/vo208.jpg

Does this help?

Hmm…

I get the 100% thing to work. It seems to have solved the view issue!

But the alignment is still off, does not work with the centered text alignment.
However I tried using the margin adjustment, and that seems to make things right. Strange.

Do you see that too?

https://preview.webflow.com/preview/amanda-thomsson-portfolio-2-0?preview=408fc63b0f22237110b382b403258baf

//A

Yes the result is good. But to make it simpler actually, get rid of the container

Put the html embed into the section and give the section text align center.

Screencast:

http://vincent.polenordstudio.fr/snap/wjz3l.mp4

Yeah, I did that before. But then the video doesn’t scale, like when I use 100%.
But I guess it’s ok to edit the width in each view.

Don’t know what would be the best?

Thank you for the explanation!

//A

Ok.

So let’s go back a little.

You are working with a layout that is not the one of a Webflow Container. Webflow container is 960px and it’s convenient because it’s always centered.

You are working with a layout of 1000px. So what you should do, is to start making your own, centered, 1000px container. Once you make it work, you can reuse it for all your sections, and, for instance, put a video at 100% inside it.

To create such a container, use a div element. Set it at 100px and click on the centering button.

Here’s the screencast.

http://vincent.polenordstudio.fr/snap/kaqh9.mp4

And from there, you can go back using the normal Video component, set at 100%

Screencast:

http://vincent.polenordstudio.fr/snap/b1k55.mp4

Thank you Vincent, I’ll try this as well :slight_smile:
I feel like it’s starting to work, just minor adjustments now.

All the best!

//A

1 Like

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