Vimeo full width

Question

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

This is how it looks now:

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.

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.

Solution 1

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>

Solution 2

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>

Solution 3

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

Solution 4

You can try this: https://jsfiddle.net/c4j73z16/4/

html

<div class='embed-container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&title=0&byline=1&portrait=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

css

<style>
  .embed-container {
    position: relative;
    padding-bottom: calc(70vh - 6.7em);
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container .vcontent {
    position: absolute;
    overflow: hidden;
    height: calc(70vh - 6.2em);
    width: 100%;
    margin-top: -0.5em;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    padding: 0;
    margin: -3em 0;
  }
</style>

I use vh heights and a further div.vcontent, to move properly to better matches what you need.

View more solutions