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