web-dev-qa-db-fra.com

Vimeo pleine largeur

J'essaie d'avoir une vidéo vimeo affichée en pleine largeur dans la page Web.

Voici à quoi cela ressemble maintenant:

enter image description here

Comme vous pouvez le voir, le noir est pleine largeur mais pas la vidéo. Il doit être pleine largeur, aucun contrôle affiché, jouer automatiquement 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 pas vimeo pro. Quelqu'un peut il m'aider avec ça.

MISE À JOUR:

J'ai changé mon code en ceci:

<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 une bordure noire en bas et en haut.

enter image description here

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.

htmlcssvideowidthvimeo
14
nielsv

Le numéro de remplissage magique que vous créez pour le conteneur doit correspondre au rapport d'aspect de la vidéo. Si vous inspectez la vidéo sur vimeo, la résolution est 1296x540. Pour obtenir le pourcentage de rapport hauteur/largeur, divisez 540/1296 = 41,66666667% de rembourrage. Voici un violon car la vidéo ne semble pas bien jouer dans le 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>
41
Michael Coker

Essaye ça

<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 avoir 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>
5
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;
    }
0
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>

J'utilise vh hauteurs et _ div.vcontent, pour vous déplacer correctement afin de mieux correspondre à vos besoins.

0
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

0
Lucas