Vimeo full width

Question

I am trying to show a vimeo video in full screen on a web page.

Here's what it looks like now:

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

My code is as follows:

<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 anyone help me with this.

UPDATE:

I 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 a black frame at the bottom and top.

I created jsfiddle where you can also see this: https://jsfiddle.net/07fkfwz3/ . And the video that you see here has no limits.

Answer 1

The magic add-on number you create for the container must match the aspect ratio of the video. If you are watching a video on vimeo, the resolution is 1296x540. To get the percentage of proportion, divide 540/1296 = 41.66666667% indent. Here's the scenario, since the video doesn't seem to play well in the SO sandbox. https://jsfiddle.net/07fkfwz3/6/

 .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; } .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> 

Answer 2

try it

 <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 violin, I managed to fix your problem as follows:

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> 

Answer 3

You can try the following: 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 still div.vcontent to navigate correctly to better align what you need.

Answer 4

HTML

 <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 style

 .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; } 

Answer 5

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

Answer 6

EU, o verme, aqui nesta carne que já começa ser meu reino, nesta carne recém-pousada em seu leito de morte, ainda quente daquele Hausto de vida que era, which is a good chance for the development of events.