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.

Vimeo pleine largeur

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.

InformationsquelleAutor nielsv | 2017-03-17

43

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:
```
.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%;
}
```
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>
```
- L'ajout de body { margin:0 } pour le violon est une preuve supplémentaire que le maximum de largeurs 🙂
InformationsquelleAutor Michael Coker

Essayer cette

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

Modifier

Donc après j'ai vu le violon, j'ai réussi à résoudre votre problème comme suit:

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>

J'ai essayé cela. Mais j'ai toujours des bordures noires en haut et en bas (mis à jour mon sujet).
Peut-être een conflit dans je css?
J'ai mis à jour mon sujet avec un jsfiddle où vous pouvez également voir cela.
Si les bords noirs sont dans la vidéo tiself..
changé ma réponse qui va travailler!
Est en train de changer padding-bottom valeur de 42% assez pour répondre à vos besoins? Merci également à @VC.L'un pour faire ce commentaire possible.

InformationsquelleAutor Jesse de gans

HTML est

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

et dans le 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;
    }

InformationsquelleAutor Ankush Verma

Vous pouvez essayer ceci:
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>

- Je utiliser vh hauteurs et une autre div.vcontent, de se déplacer correctement à correspond mieux à ce que vous avez besoin.

InformationsquelleAutor g.annunziata

Cela a fonctionné pour moi:

<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

InformationsquelleAutor Lucas

Vous devez vous connecter pour publier un commentaire.