web-dev-qa-db-fra.com

Incorporer correctement la vidéo Youtube dans la page bootstrap 3.0

Je dois intégrer une vidéo YouTube à mon site responsive, mais la mise à l'échelle n'est pas correcte, en particulier sur mobile. Cela a l'air bien sur les ordinateurs de bureau et les tablettes, mais une fois que vous avez une largeur inférieure à 600, la vidéo casse son contenu. Pour visionner l'intégralité de la vidéo sur mobile, vous devez vous assurer que le reste du contenu ne remplit que la moitié de l'écran verticalement. Pas si bon.

Je souhaite que le contenu du texte soit 1/3 large et que la vidéo soit 2/3 large sur le bureau et les tablettes et empilée sur mobile avec la vidéo et le contenu à la fois 100% de la largeur de la fenêtre d'affichage. J'ai essayé d'utiliser width = "100%" sur l'iframe, mais la hauteur ne s'adapte pas correctement lorsque vous redimensionnez et la vidéo est étirée ou écrasée.

Je dois également le faire avec CSS uniquement, car je pose simplement mes feuilles de style sur le stock bootstrap 3.0.

Voici mon code:

 <div class="container">            
            <div class="row">
                <div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
                <div class="col-sm-8">
                   <iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
                </div>
 </div>
csstwitter-bootstrapyoutubeembed
59
TheHooligan

Il existe une solution native Bootstrap3: http://getbootstrap.com/components/#responsive-embed

depuis Bootstrap 3.2.0!

Si vous utilisez Bootstrap <v3.2.0, regardez dans le fichier "responsive-embed.less" de v3.2.0 - vous pouvez éventuellement utiliser/copier ce code dans votre cas (cela fonctionne pour moi dans la v3. 1.1).

73
Dado

Je sais qu'il est tard, j'ai le même problème avec un ancien thème personnalisé, ajouté à boostrap.css:

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Et pour la vidéo:

<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>
24
Grégor González

Pensez à insérer les vidéos dans quelque chose que vous pouvez assouplir avec bootsrap.

Le bootstrap n'est pas un outil magique, c'est juste un moteur de mise en page. Vous l'avez presque dans votre exemple.

Utilisez simplement la grille fournie par bootstrap et supprimez le dimensionnement strict de l'iframe. Utilisez les guides de classe bootstrap pour la grille.

Par exemple:

<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">

Vous verrez comment la classe de l'iframe changera, compte tenu de votre résolution.

Un Fiddel aussi: http://jsfiddle.net/RsSAT/

6
Pogrindis

Eh bien, il a une solution simple et facile. Vous pouvez créer votre vidéo facilement pour s'adapter à tout appareil et à la taille de l'écran. Voici le code HTML et CSS:

.yt-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
}

.yt-container iframe, .yt-container object, .yt-container embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}
<div class="yt-container">
   <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>

Source: https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/

5
Faruque Ahamed Mollick

Cela dépend également de la façon dont vous appelez votre site avec bootstrap. Dans mon exemple, j'utilise col-md-12 pour ma div vidéo et j'ajoute la classe col-sm-12 pour l'iframe. Ainsi, lors d'un redimensionnement à un écran plus petit, la vidéo ne sera pas affichée en compression. J'ajoute aussi la hauteur à l'iframe:

<div class="col-md-12">
<iframe class="col-sm-12" height="333" frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>
5
keenlio.com

J'utilise aussi bootstrap 3.x et le code suivant pour l'intégration de vidéo youtube sensible fonctionne comme un charme pour moi:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

J'ai donné une réponse similaire sur un autre fil ( Réduire une vidéo YouTube à la largeur de réponse ), mais je suppose que mes réponses peuvent aussi aider ici.

4
Pascal Klein

Cela fonctionne bien pour moi ...

   .delimitador{
        width:100%;
        margin:auto;
    }
    .contenedor{
        height:0px;
        width:100%;
        /*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */
        padding-top:56.25%; /* Relación: 16/9 = 56.25% */
        position:relative;
    }

    iframe{
            position:absolute;
            height:100%;
            width:100%;
            top:0px;
            left:0px;
    }

puis

<div class="delimitador">
<div class="contenedor">
// youtube code 
</div>
</div>
3
Esteban