Embed vimeo video code problem

[luntas (Valentino)]

Hello guys,

I’m having trouble to put in the embed code of a vimeo video on my site. It seems that the HTML Embed Code Element is automatically 100% height or something.

Here is the normal link:
https://vimeo-lazy-load.webflow.io/

Here is the read only link:

https://preview.webflow.com/preview/vimeo-lazy-load?utm_medium=preview_link&utm_source=dashboard&utm_content=vimeo-lazy-load&preview=d44180cc1a46e47cf91d746b1fce0a6a&mode=preview

As you can see the width is working fine but the height is the problem here, especially because i got a border around it. I just want it to be fitting on top and bottom and not wasting space, specially on mobile. (i got two html elements because of desktop and mobile position).

The reason why i don’t use the normal video element and put the regular vimeo link inside it is page speed, i noticed that my site slows down dramatically because of “not used JavaScript”

Just to let you know I’m really not into coding

Thank you for your help

[Siton_Systems (Ezra Siton)]

First - remove the display: flex (use display block)

Copy Paste This for responsive video (+ autoplay + mute):

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/444376751?muted=1&autoplay=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Output:

Not need her to know code (Use Viemo share GUI):

1

2

3

Last. Add param muted=1 (Otherwise the autoplay is blocked by browsers like chrome).

[luntas (Valentino)]

Thank you, it works perfectly

[luntas (Valentino)]

How could i edit the code to make my vimeo videos “lazy load”?

New read only link: https://preview.webflow.com/preview/vimeo-lazy-load?utm_medium=preview_link&utm_source=dashboard&utm_content=vimeo-lazy-load&preview=d44180cc1a46e47cf91d746b1fce0a6a&mode=preview