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.

Michael Coker · Accepted Answer · 2020-01-29T20:23:19.283

75

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>

edited Jan 29 '20 at 20:23

answered Mar 20 '17 at 17:23

Michael Coker

52,626
5
64
64

1

Adding `body { margin:0 }` to the fiddle further exemplifies the fullest of widths :) – Ryan Wheale Mar 24 '17 at 22:43
1

Above, you mean `padding-bottom: padding-bottom: 41.66666667%;`, right? You have it that way in the JS Fiddle code, but not in the SO sandbox code. – tanius Jan 29 '20 at 18:28
1

@tanius yes, thanks for spotting that. Cleaned this up and added css custom properties and `calc()` to do the math for you. – Michael Coker Jan 29 '20 at 20:24

Jesse de gans · Answer 2 · 2017-03-20T13:06:26.640

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>

I've tried this. But I still have black border on top and bottom (updated my topic). — nielsv, Mar 17 '17 at 13:29
I've updated my topic with a jsfiddle where you can also see this. — nielsv, Mar 17 '17 at 13:48
Is changing padding-bottom value to 42% enough to fulfill your needs? Also thanks to @VC.One for making this comment possible. — ch1ll, Mar 21 '17 at 07:43

score 6 · Answer 3 · answered Feb 06 '20 at 11:01

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

score 2 · Answer 4 · edited Mar 21 '17 at 10:41

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.

score 0 · Answer 5 · answered Mar 20 '17 at 13:29

HTML is

<div class='container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

and in styling

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

    }
    .container .vcontent {
       position: absolute;
   overflow: hidden;
   height: calc(70vh - 6.2em);
   width: 100%;
   margin-top: -0.5em;
    }
    .container iframe,
    .container object,
    .container embed {
      position: absolute;
  overflow: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 70vh;
  padding: 0;
  margin: -3em 0;
    }

score 0 · Answer 6 · answered May 28 '19 at 01:37

This worked for me:

<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/157467640?background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Source: https://forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2

Vimeo full width

6 Answers6

Edit

CSS

HTML

html

css