Fluid Width Video

IN EINER WELT von responsiven und flüssigen Layouts im Web, EIN MEDIENTYP steht dem perfekten Einklang im Wege: Video. Es gibt viele Möglichkeiten, wie Video auf Ihrer Website angezeigt werden kann. Sie hosten das Video vielleicht selbst und präsentieren es über das HTML5 <video>-Tag. Sie verwenden möglicherweise YouTube, Vimeo oder einen anderen Videodienstleister, der <iframe>-Code zur Anzeige von Videos bereitstellt. Lassen Sie uns abdecken, wie Sie diese alle flüssig in der Breite machen, während Sie eine angemessene Höhe beibehalten, basierend auf ihrem Seitenverhältnis.

In jedem dieser Videoszenarien ist es sehr üblich, eine statische width und height anzugeben.

<video width="400" height="300" controls ... ></video>

<iframe width="400" height="300" ... ></iframe>

<!-- maybe even super old school -->
<object width="400" height="300" ... />
<embed width="400" height="300" ... />

Erraten Sie mal? Das Festlegen statischer Breiten ist in Umgebungen mit flüssiger Breite keine gute Idee. Was passiert, wenn der übergeordnete Container dieses Videos schmaler wird als die angegebene 400px? Er wird herausragen und wahrscheinlich lächerlich und peinlich aussehen.

Können wir also nicht einfach das tun?

<video width="100%" ... ></video>

Nun, ja, das können Sie! Wenn Sie standardmäßiges HTML5-Video verwenden, passt das Video in die Breite des Containers. Es ist wichtig, dass Sie die height-Deklaration entfernen, wenn Sie dies tun, damit das Seitenverhältnis des Videos beibehalten wird, während es wächst und schrumpft, damit keine peinlichen "Balken" entstehen, die den leeren Raum füllen (im Gegensatz zu Bildern behält das eigentliche Video sein Seitenverhältnis unabhängig von der Größe des Elements bei).

Sie können dies über CSS erreichen (und sich keine Sorgen über das im HTML deklarierte machen), wie hier

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

<iframe> Video (YouTube, Vimeo, etc.)

Unser kleiner Trick von oben wird uns nicht helfen, wenn wir mit Videos umgehen, die über <iframe> bereitgestellt werden. Die Breite auf 100% zu erzwingen ist effektiv, aber wenn wir height: auto setzen, erhalten wir eine statische Höhe von 150px¹, was für die meisten Videos viel zu gedrungen ist und mehr L&P (Lächerlich und Peinlich) bedeutet.

Glücklicherweise gibt es hier ein paar mögliche Lösungen. Eine davon wurde von Thierry Koblentz initiiert und 2009 auf A List Apart vorgestellt:  Creating Intrinsic Ratios for Video. Mit dieser Technik verpacken Sie das Video in ein anderes Element mit einem intrinsischen Seitenverhältnis und positionieren das Video dann absolut darin. Das gibt uns eine flüssige Breite mit einer angemessenen Höhe, auf die wir uns verlassen können.

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Es gibt eine clevere Anpassung davon, die es Ihnen ermöglicht, das Seitenverhältnis direkt aus dem HTML anzupassen, wie

<div class="videoWrapper" style="--aspect-ratio: 3 / 4;">
  <iframe ...>

.videoWrapper {
  ...
  /* falls back to 16/9, but otherwise uses ratio from HTML */
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); 
}

Einige alte Video-Einbettungen verwenden <object> und <embed>-Tags. Wenn Sie also umfassend sein wollen, aktualisieren Sie den Wrapper-Selektor auf

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object { }

Aber, aber... Seitenverhältnisse, Legacy-Inhalte, Nicht-Tech-Nutzer, etc.

Die obige Technik ist fantastisch, hat aber mehrere mögliche Einschränkungen

1. Sie erfordert ein Wrapper-Element, daher ist das direkte Kopieren und Einfügen von Code von YouTube ausgeschlossen. Die Benutzer müssen etwas versierter sein.
2. Wenn Sie Legacy-Inhalte haben und für flüssige Inhalte neu gestalten, müssen alle alten Videos HTML-Anpassungen erfahren.
3. Alle Videos müssen das gleiche Seitenverhältnis haben. Andernfalls werden sie in ein anderes Seitenverhältnis gezwungen und Sie erhalten die "Balken". Oder Sie benötigen eine Werkzeugkiste mit Klassennamen, die Sie anwenden können, um dies anzupassen, was eine zusätzliche Komplikation darstellt.

Wenn eine dieser Einschränkungen auf Sie zutrifft, könnten Sie eine JavaScript-Lösung in Betracht ziehen.

Stellen Sie sich Folgendes vor: Wenn die Seite geladen wird, werden alle Videos überprüft und ihr Seitenverhältnis gespeichert. Einmal sofort und immer, wenn das Fenster vergrößert wird, werden alle Videos so vergrößert, dass sie die verfügbare Breite ausfüllen und ihr Seitenverhältnis beibehalten. Mit der jQuery JavaScript-Bibliothek sieht das so aus

// Find all YouTube videos
// Expand that selector for Vimeo and whatever else
var $allVideos = $("iframe[src^='//www.youtube.com']"),

  // The element that is fluid width
  $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

Das ist irgendwie das, was FitVids.js wurde

Außer dass anstatt sich mit all diesen Größenänderungen zu befassen, FitVids.js alle Videos durchläuft und den HTML-Wrapper und CSS hinzufügt, der das Seitenverhältnis ermöglicht. Das ist *deutlich effizienter*, als an einen Fenstergrößenänderungs-Handler binden zu müssen!

Plain JavaScript stattdessen

jQuery ist heutzutage ziemlich aus der Mode gekommen. Glücklicherweise hat Dave eine Vanilla-Version (die BYO CSS ist)