wake-up-neo.com

Youtube-Video richtig in bootstrap 3.0 page einbetten

Ich muss ein YouTube-Video in meine responsive Site einbetten, aber es wird nicht richtig skaliert, insbesondere auf Mobilgeräten. Auf Desktop-Computern und Tablets sieht es gut aus, aber sobald Sie eine Ansichtsfensterbreite von 600 unterschreiten, wird der Container des Videos beschädigt. Um das gesamte Video auf Mobilgeräten anzuzeigen, müssen Sie so weit auseinanderdrücken, dass der Rest des Inhalts nur etwa die Hälfte des Bildschirms vertikal ausfüllt. Nicht so gut.

Ich möchte, dass der Textinhalt 1/3 breit und das Video 2/3 breit auf dem Desktop und auf dem Tablet ist und auf dem Handy mit dem Video und dem Inhalt zu 100% der Breite des Ansichtsfensters gestapelt wird. Ich habe versucht, width = "100%" für den Iframe zu verwenden, aber dann wird die Höhe nicht richtig skaliert, wenn Sie die Größe ändern und das Video entweder gestreckt oder gestaucht wird.

Ich muss es auch nur mit CSS machen, da ich einfach meine Stylesheets über stock bootstrap 3.0 lege.

Hier ist mein 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>
59
TheHooligan

Es gibt eine native Bootstrap3-Lösung: http://getbootstrap.com/components/#responsive-embed

seit Bootstrap 3.2.0!

Wenn Sie Bootstrap <v3.2.0 verwenden, schauen Sie in die Datei "responsive-embed.less" von v3.2.0 - möglicherweise können Sie diesen Code in Ihrem Fall verwenden/kopieren (es funktioniert für mich) in v3.1.1).

73
Dado

Ich weiß, dass es spät ist, ich habe das gleiche Problem mit einem alten benutzerdefinierten Thema, das gerade zu boostrap.css hinzugefügt wurde:

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

Und für das Video:

<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>
24

Überlegen Sie, ob Sie die Videos in etwas packen möchten, das Sie mit bootsrap flexibel gestalten können.

Das bootstrap ist kein magisches Werkzeug, es ist nur eine Layout-Engine. Sie haben es fast in Ihrem Beispiel.

Verwenden Sie einfach das von bootstrap zur Verfügung gestellte Raster und entfernen Sie die strengen Größenangaben im iframe. Verwenden Sie die bootstrap Klassenanleitungen für das Raster.

Beispielsweise:

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

Sie werden sehen, wie sich die Klasse des Iframes bei gegebener Auflösung ändert.

Ein Fiddel auch: http://jsfiddle.net/RsSAT/

6
Pogrindis

Nun, es hat eine einfache und einfache Lösung. Sie können Ihr Video einfach für jedes Gerät und jede Bildschirmgröße anpassen. Hier ist der HTML- und CSS-Code:

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

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

Es hängt auch davon ab, wie Sie Ihre Site mit Bootstrap gestalten. In meinem Beispiel verwende ich col-md-12 für mein Video div und füge die Klasse col-sm-12 für den iframe hinzu. Wenn Sie also die Größe auf einen kleineren Bildschirm ändern, wird das Video nicht komprimiert angezeigt. Ich füge auch Höhe zum iframe hinzu:

<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

Ich verwende auch bootstrap 3.x und der folgende Code für das Einbetten von YouTube-Videos funktioniert für mich wie Charme:

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

Ich habe eine ähnliche Antwort in einem anderen Thread gegeben ( YouTube-Video auf Reaktionsbreite verkleinern ), aber ich denke, meine Antworten können auch hier helfen.

4
Pascal Klein

Das funktioniert gut für mich ...

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

und dann

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