Streaming live at 10am (PST)

Embed vimeo video code problem

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 :slight_smile:

Thank you for your help

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

image

3

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

1 Like

Thank you, it works perfectly :slight_smile:

1 Like

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