Embed vimeo video code problem

luntas · August 9, 2020, 3:44pm

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 · August 9, 2020, 4:22pm

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: