Bootstrap carrousel avec responsive HTML5 vidéos?

Je suis en train de faire un carrousel avec des vidéos. Avec les images, il fonctionne très bien à l'image sont sensibles même en vue de téléphone portable. Mais avec des vidéos la largeur est sensible, mais pas à la hauteur. Fondamentalement, je voudrais obtenir le même comportement avec un carrousel d'image, mais avec une vidéo. J'ai essayé beaucoup de trucs en ligne, mais aucun n'est de le faire. Ma vidéo est de 1024/552px

Essayé de mon mieux à un violon. Vous pouvez voir si vous chargez le violon avec une petite largeur, il conserve la même hauteur et il n'est pas sensible, mais la largeur du carrousel/vidéo (c'cultures de 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 mieux illustrer 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 votre aide.

OriginalL'auteur Paperbag Writer | 2015-03-19

  1. 2

    ajouter votre css,

    video{
width:100%
}
    sur le violon, il fonctionne, mais sur mon projet voici ce qu'il fait : aucune idée pourquoi ? i.imgur.com/CcBBvBY.png
    la vidéo est redimensionnée pour le moment mais le carrousel ne l'est pas? J'ai supprimé toutes les autres css de sorte que le problème n'est pas là
    J'ai mis cette vidéo{ max-width: 100%; height: auto; } et maintenant ça fonctionne. Merci de me mettre sur la bonne voie!
    bienvenue ...

    OriginalL'auteur Logz

  2. 0

    aussi d'ajouter de la largeur/hauteur directement à la balise fonctionne:

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

    ce qui concerne.

    mais ce n'est pas réactive.

    OriginalL'auteur WongFaiHung

  3. 0

    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%);                            
}

    OriginalL'auteur Felipe de Castro