Vimeo full width
Try this
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
max-width: 100%; height: auto;
}
.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/208176323?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Edit
So after i saw the fiddle i managed to fix your problem like so:
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 13%;
width: 100%;
height: 75%;
}
HTML
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Replace the ID number of the video (in this case 19022044)
HTML:
<div class="vimeo-full-width">
<iframe src="https://player.vimeo.com/video/19022044?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
CSS:
.vimeo-full-width {
padding: 56.25% 0 0 0;
position: relative;
}
.vimeo-full-width iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The top padding is 56.25% because of aspect ratio 16:9
The magic padding number you create for the container needs to match the aspect ratio of the video. If you inspect the video on vimeo, the res is 1296x540. To get the aspect ratio percentage, divide 540 / 1296 * 100% = 41.66666667% padding.
Here's a fiddle since the video doesn't seem to play well in the SO sandbox. https://jsfiddle.net/mcoker/p7q6x4d5/1/
.embed-container {
--video--width: 1296;
--video--height: 540;
position: relative;
padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
overflow: hidden;
max-width: 100%;
background: black;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>