YouTube-Video auf responsive Breite verkleinern

Question

Ich habe ein YouTube-Video auf unserer Website eingebettet und wenn ich den Bildschirm auf Tablet- oder Handy-Größe verkleinere, hört das Video bei einer Breite von etwa 560px auf zu schrumpfen. Ist das standardmäßig für YouTube-Videos so oder gibt es etwas, das ich dem Code hinzufügen kann, um es kleiner zu machen?

Answer 1

Sie können YouTube-Videos mit CSS responsiv gestalten. Umschließen Sie das iframe in einem div mit der Klasse "videowrapper" und wenden Sie die folgenden Styles an:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das .videowrapper-Div sollte sich innerhalb eines responsiven Elements befinden. Der Padding auf dem .videowrapper ist notwendig, um das Video vor dem Zusammenfallen zu schützen. Je nach Layout müssen Sie möglicherweise die Zahlen anpassen.

Answer 2

Wenn Sie Bootstrap verwenden, können Sie auch ein responsives Einbetten verwenden. Dadurch wird das Video vollständig responsiv.

http://getbootstrap.com/components/#responsive-embed

Im Folgenden finden Sie einige Beispielscodes.

Answer 3

Raffinierte JavaScript-Lösung nur für YouTube und Vimeo mit jQuery.

// -- Nachdem das Dokument bereit ist
$(function() {
  // Suchen Sie alle YouTube- und Vimeo-Videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Seitenverhältnis für jedes Video berechnen und speichern
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // und die fest codierte Breite/Höhe entfernen
      .removeAttr('height')
      .removeAttr('width');
  });

  // Wenn das Fenster neu skaliert wird
  $(window).resize(function() {
    // Alle Videos gemäß ihrem eigenen Seitenverhältnis skalieren
    $allVideos.each(function() {
      var $el = $(this);
      // Breite des übergeordneten Elements dieses Videos erhalten
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Starten Sie eine Neuskalierung, um alle Videos beim Laden der Seite anzupassen
  }).resize();
});

Einfach zu verwenden, nur einbetten:

Oder mit responsivem Design-Framework wie Bootstrap.

• Verlässt sich auf Breite und Höhe des iframes, um das Seitenverhältnis zu erhalten
• Kann Seitenverhältnis für Breite und Höhe verwenden (width="16" height="9")
• Wartet, bis das Dokument bereit ist, bevor es skaliert wird
• Verwendet jQuery-Substring-Selektor *= anstelle des Anfangs des Strings ^=
• Erhält Referenzbreite vom übergeordneten Element des Video iframes anstatt eines vordefinierten Elements
• JavaScript-Lösung
• Kein CSS
• Kein Wrapper erforderlich

Danke an @Dampas für den Ausgangspunkt. https://stackoverflow.com/a/33354009/1011746

Answer 4

Ich habe den in der akzeptierten Antwort hier verwendeten CSS für meine responsive YouTube-Videos verwendet - hat bis zum Update ihres Systems durch YouTube um den Anfang des August 2015 herum großartig funktioniert. Die Videos auf YouTube haben die gleichen Abmessungen, aber aus irgendeinem Grund hat der CSS-Code in der akzeptierten Antwort jetzt schwarze Balken oben und unten.

Ich habe mit den Größen herumgespielt und mich entschieden, den oberen Padding zu entfernen und das untere Padding auf 56,45% zu ändern. Sieht gut aus.

.videowrapper {
    position: relative;
    padding-bottom: 56,45%;
    height: 0;
}

Answer 5

Moderne einfache CSS-Lösung

Das neue aspect-ratio ist die moderne Lösung für dieses Problem.

aspect-ratio: 16 / 9;

Das ist alles, was Sie benötigen, um eine div, Bild, iframe-Größe automatisch anzupassen. Beispiele.

Es hat gute Unterstützung, ist jedoch noch nicht in Safari (wird bei kommendem iOS15 verfügbar sein) - daher benötigen Sie vorerst noch einen Fallback. Sie können das mit dem @supports-Feature erreichen

.element 
{
   aspect-ratio: 16 / 9;

   @supports not (aspect-ratio: 16 / 9) 
   {
       // Wählen Sie eine der anderen Lösungen auf dieser Seite aus
   }
 }

Unter der Annahme, dass Ihr Entwicklungsbrowser diese Eigenschaft unterstützt, sollten Sie ohne sie testen, indem Sie sowohl aspect-ratio als auch @supports auskommentieren.