title: Vimeo full width
body: <p>I'm trying to have a vimeo video shown full width in web page. </p>
  
  <p>This is how it looks now:</p>
  
  <p><a href="https://i.stack.imgur.com/4phFv.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/4phFv.jpg" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>My code looks like this now:</p>
  
  <pre><code>&lt;iframe src="https://player.vimeo.com/video/208176323?autoplay=1&amp;loop=1&amp;background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The client has vimeo plus but not vimeo pro. Can someone help me with this.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I've changed my code to this:</p>
  
  <pre><code>&lt;style&gt;
      .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%;
      }
  &lt;/style&gt;
  
  &lt;div class='embed-container'&gt;&lt;iframe src='https://player.vimeo.com/video/208791851?autoplay=1&amp;loop=1&amp;background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But I still have black border on bottom and top.</p>
  
  <p><a href="https://i.stack.imgur.com/e2tdi.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/e2tdi.jpg" alt="enter image description here"></a></p>
  
  <p>I've created a jsfiddle where you can also see this: <a href="https://jsfiddle.net/07fkfwz3/" rel="noreferrer">https://jsfiddle.net/07fkfwz3/</a> . And the video that you can see <a href="https://vimeo.com/208791851" rel="noreferrer">here</a> doesn't have any borders.</p>