web-dev-qa-db-fra.com

Carrousel de démarrage avec des vidéos HTML5 réactives?

J'essaie de faire un carrousel avec des vidéos. Avec les images, cela fonctionne très bien, les images réagissent même en mode mobile. Mais avec les vidéos, la largeur est sensible mais pas la hauteur. En gros, j'aimerais avoir le même comportement avec une image de carrousel mais avec une vidéo. J'ai essayé beaucoup de trucs en ligne mais aucun ne le fait. Ma vidéo est 1024/552px

J'ai essayé de mon mieux au violon. Vous pouvez voir que si vous chargez le violon avec une petite largeur, il garde la même hauteur et ne réagit pas, mais la largeur du carrousel/de la vidéo l’est (il recoupe la vidéo sur les côtés). Il n'a pas le même comportement qu'une image. Comme vous le verrez, j'ai inclus une image dans la deuxième diapositive pour illustrer davantage mon problème. 

https://jsfiddle.net/687bsb21/1/

Voici le code:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">            

        <div class="item active">
             <div align="center">
               <video autoplay loop>
                 <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="1024" height="552" type="video/mp4">
                 Your browser does not support the video tag.
              </video>
          </div>
             <div class="carousel-caption">
              <h3>hello</h3>
              <p>hello</p>
            </div>
          </div> 
            <div class="item">
          <img src="http://dummyimage.com/1024x552/000/fff" class="img-responsive" alt="asfds">
          <div class="carousel-caption">
              <h3>hello</h3>
              <p>hello.</p>
            </div>
        </div>
          <a class="left carousel-control" href="#carouselHelp" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carouselHelp" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>

Merci pour ton aide.

javascripthtmlcsstwitter-bootstraphtml5-video
6
Paperbag Writer

ajoutez vos css,

video{
width:100%
}
2
Logz

C'est la meilleure solution:

<div class="container">
  <video><source src="video.mp4" type="video/mp4"></video>
</div>

.container{
  position: relative;
  width: 100%
}
.container video{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);                            
}
0
Felipe de Castro

ajouter également la largeur/hauteur directement à la balise fonctionne:

<video autoplay loop width="1024" height="552">

cordialement.

0
WongFaiHung