Intégration correcte de la vidéo Youtube dans la page bootstrap 3.0

j'ai besoin d'intégrer une vidéo YouTube dans mon site responsive mais ce n'est pas une mise à l'échelle correcte, surtout sur mobile. Il semble bien sur le bureau et les tablettes, mais une fois que vous obtenez en dessous d'une largeur de viewport de 600, la vidéo casse son conteneur. Pour visionner l'intégralité de la vidéo sur mobile, vous devez pincer à un point que le reste du contenu ne remplit environ la moitié de l'écran à la verticale. Pas si bon.

je veux que le contenu du texte soit de 1/3 de large et que la vidéo soit de 2/3 de large sur bureau et tablettes et empilés sur mobile avec la vidéo et le contenu à la fois 100% de la largeur de viewport. J'ai essayé d'utiliser width="100%" Sur l'iframe, mais la hauteur ne se redimensionne pas correctement et la vidéo est soit étirée, soit écrasée.

j'ai aussi besoin de le faire avec CSS seulement car je suis tout simplement la pose de mes feuilles de style sur bootstrap stock 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>
56
demandé sur TheHooligan 2014-01-02 21:32:01

7 réponses

il y a une solution native Bootstrap3: http://getbootstrap.com/components/#responsive-embed

depuis Bootstrap 3.2.0!

si vous utilisez Bootstrap < v3.2.0 alors regardez dans " responsive-embed.moins" fichier de v3.2.0 - peut-être vous pouvez utiliser/copiez ce code dans votre cas (il fonctionne pour moi en v3.1.1).

72
répondu Dado 2014-07-30 10:07:31

je sais il est tard, j'ai le même problème avec un vieux thème personnalisé, juste ajouté de bootstrap.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
répondu Grégor González 2015-08-22 13:04:30

pensez à envelopper les vidéos dans quelque chose que vous pouvez rendre flexible via bootsrap.

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

il suffit d'utiliser la grille fournie par bootstrap et supprimer les tailles strictes sur 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 le la classe de l'iframe changera alors en fonction de Votre résolution.

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

5
répondu Pogrindis 2014-01-02 17:41:43

cela dépend aussi de la façon dont vous coiffez votre site avec bootstrap. Dans mon exemple, j'utilise col-md-12 pour mon div vidéo, et ajoute la classe col-sm-12 pour l'iframe, donc quand redimensionnez à l'écran plus petit, la vidéo ne sera pas vue pressé. 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
répondu keenlio.com 2014-07-14 08:29:15

j'utilise bootstrap 3.x ainsi que le code suivant fore responsive vidéo Youtube embedding fonctionne comme le 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étrécir une vidéo YouTube à la largeur responsive ), mais je suppose que mes réponses peuvent aider ici aussi.

4
répondu Pascal Klein 2017-05-23 12:25:54

Eh bien, il a une solution simple et facile. Vous pouvez faire votre vidéo facilement pour s'adapter à n'importe quel 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/

4
répondu Faruque Ahamed Mollick 2017-02-07 13:38:59

ça me va très bien... 

   .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;
    }

et ensuite 

<div class="delimitador">
<div class="contenedor">
// youtube code 
</div>
</div>
3
répondu Esteban 2014-06-14 00:05:47