Vimeo pełnej szerokości

Question

Próbuję mieć wideo vimeo pokazane pełnej szerokości na stronie internetowej.

Jak to wygląda teraz:

Jak widać czarny jest pełna szerokość, ale nie film. Powinna być pełna, bez widocznych kontroli, grać automatycznie i grać w pętli.

Mój kod wygląda teraz:

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

Klient ma Vimeo Plus, ale nie Vimeo pro. Czy ktoś może mi w tym pomóc?

UPDATE:

zmieniłem mój kod to:

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

Ale nadal mam czarną ramkę na dole i na górze.

Utworzyłem jsfiddle gdzie można również zobaczyć to: https://jsfiddle.net/07fkfwz3/. A film wideo, który można zobaczyć here nie ma żadnych granic.

Answer 1

Magiczna liczba wyściółka utworzyć dla kontenera musi pasować do proporcji filmu. Jeśli sprawdzasz wideo na vimeo, rozdzielczość wynosi 1296 x 540. Aby uzyskać proporcje obrazu, podziel 540/1296 = 41,66666667% padding. Oto skrzypce, ponieważ film nie wydaje się dobrze odtwarzać w piaskownicy SO.https://jsfiddle.net/07fkfwz3/6/

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

Spróbuj

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

Edycja

Więc po Widziałam skrzypce udało mi się rozwiązać problem tak:

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

Można spróbować to: 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> 

używam vh wysokości i dalej div.vcontent, aby przejść odpowiednio do lepszych meczów, czego potrzebują.

Answer 4

HTML jest

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

i stylizacji

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