Streaming live at 10am (PST)

Issue with video embed

I’m trying to embed a vimeo video in the header section of my site. I want the video to span the full width of the viewport. I need it to be able to be placed behind content (so it’ll act like a background video). I don’t want to use the background video component because my file size is too big and the quality always comes out poor.

I found this code for embed but there are few issues with it:

There are a couple of issues with the embed.

<style>.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/408562946?autoplay=true&loop=true&muted=true&background=true' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

For some reason, the video doesn’t span the full height of the embed element. How can I get this to fit with the embed element?

Bottom line, I want to be able to control the height of the video while having it span the full viewport width. I am fine with ‘cropping’ the video in (similar to how squarespace handles videos when you adjust the height).

How do I accomplish this?? I’ve been trying to find a solution for the greater part of the day and nothing seems to work.

Thanks in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/wwesco?utm_medium=preview_link&utm_source=designer&utm_content=wwesco&preview=eb88a892eeb680119d3bbe6cfc9fa74b&mode=preview

I have a solution to this. View this post:

Hey Jacob

Sorry for the late reply|

You can try Vimeo widget.
Its as simple as cooking of a pan cake. In Vimeo widget you can just need to mention #hashtag or @handle from where you want to fetch feeds and everything is sorted.

2 Likes