Vimeo full width

nielsv picture nielsv · Mar 17, 2017 · Viewed 43.2k times · Source

I'm trying to have a vimeo video shown full width in web page.

This is how it looks now:

enter image description here

As you can see the black is full width but not the video. It should be full width, no controls shown, play automatic and play in a loop.

My code looks like this now:

<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The client has vimeo plus but not vimeo pro. Can someone help me with this.

UPDATE:

I've changed my code to 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/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

But I still have black border on bottom and top.

enter image description here

I've created a jsfiddle where you can also see this: https://jsfiddle.net/07fkfwz3/ . And the video that you can see here doesn't have any borders.

Answer

Michael Coker picture Michael Coker · Mar 20, 2017

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>