Vimeo pleine largeur
Je suis d'essayer d'avoir une vidéo vimeo montré toute la largeur de la page web.
C'est à quoi il ressemble maintenant:
Comme vous pouvez le voir, le noir est la pleine largeur mais pas la vidéo. Il doit être pleine largeur, pas de commandes indiquées, jouer automatique et jouer en boucle.
Mon code ressemble à ceci maintenant:
<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Le client a vimeo plus mais n'est pas vimeo pro. Quelqu'un peut-il m'aider avec cela.
Mise à JOUR:
J'ai changé mon code de cette fonction:
<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>
Mais j'ai toujours des bordures noires en haut et en bas.
J'ai créé un jsfiddle où vous pouvez également voir ceci: https://jsfiddle.net/07fkfwz3/ . Et la vidéo que vous pouvez voir ici n'a pas de frontières.
Vous devez vous connecter pour publier un commentaire.
La magie rembourrage nombre que vous créez pour le récipient doit correspondre au ratio d'aspect de la vidéo. Si vous inspectez la vidéo sur vimeo, le res est 1296x540. Pour obtenir le ratio d'aspect de pourcentage, diviser 540 /1296 = 41.66666667% de remplissage. Voici un violon depuis la vidéo ne semble pas bien jouer dans le bac à sable. https://jsfiddle.net/07fkfwz3/6/
CSS:
HTML:
body { margin:0 }
pour le violon est une preuve supplémentaire que le maximum de largeurs 🙂Essayer cette
Modifier
Donc après j'ai vu le violon, j'ai réussi à résoudre votre problème comme suit:
CSS
HTML
HTML est
et dans le style
Vous pouvez essayer ceci:
https://jsfiddle.net/c4j73z16/4/
html
css
- Je utiliser
vh
hauteurs et une autrediv.vcontent
, de se déplacer correctement à correspond mieux à ce que vous avez besoin.Cela a fonctionné pour moi:
Source: https://forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2