Flüssigkeitsbreite Video

In der heutigen Zeit von reaktionsschnellen und flüssigen Weblayouts gibt es eine Art Medien, die eine perfekte Harmonie behindern: Video. Es gibt viele Möglichkeiten, Videos auf der Website anzuzeigen. Sie können Ihre Videos hosten und HTML5 durchlaufen<video></video> Tag -Anzeige; kann auch mit YouTube, Vimeo oder anderen zur Verfügung gestellt werden<iframe></iframe> Code zum Anzeigen des Videodieners. Lassen Sie uns sehen, wie alle Videos in Flüssigkeitsbreite bleiben und gleichzeitig das richtige Seitenverhältnis aufrechterhalten.

In diesen Video -Einbettungsszenarien ist es sehr üblich, statische Breiten und Höhen zu deklarieren.

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

Ratet es? Eine statische Breite in einer Flüssigkeitsbreite zu erklären, ist keine gute Idee. Was passiert, wenn der übergeordnete Container des Videos auf weniger als die deklarierten 400 Pixel schrumpft? Es wird überlaufen und kann lächerlich und umständlich aussehen.

Können wir das nicht einfach tun?

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

Ja, du kannst! Wenn Sie Standard -HTML5 -Video verwenden, addiert dies das Video an die Breite des Containers. Wichtig ist, dass Sie die Höhenerklärung so entfernen, dass das Video wächst und schrumpft, um das Seitenverhältnis aufrechtzuerhalten, so dass es keinen unangenehmen "Balken" hat, der den leeren Raum füllt (im Gegensatz zu einem Bild hält das tatsächliche Video das Seitenverhältnis unabhängig von der Größe des Elements).

Sie können dies über CSS tun (ohne sich Sorgen darüber zu machen, was in HTML deklariert wird):

 Video {
  /* Überschreiben Sie andere Stile für die Reaktionsfähigkeit*//
  Breite: 100%! Wichtig;
  Höhe: Auto! Wichtig;
}

<iframe></iframe> Videos (YouTube, Vimeo usw.)

Wenn die Verarbeitung passiert<iframe></iframe> Unsere obigen Tipps helfen bei der Übertragung von Videos nicht. Die Zwangsbreite von 100% ist gültig, aber wenn wir height: auto endet mit einer statischen Höhe von ¹⁵⁰ Pixel, was für die meisten Videos zu kurz ist und mehr R & E (absurd und unangenehm) verursacht.

Glücklicherweise sind hier einige mögliche Lösungen. Einer von ihnen wurde erstmals von Thierry Kobletz erstellt und 2009 auf einer Liste veröffentlicht: Erstellung einer intrinsischen Skala für Videos. Mit dieser Technik wickeln Sie das Video mit einem inhärenten Seitenverhältnis in ein anderes Element ein und positionieren das Video in diesem Element absolut. Dies ermöglicht es uns, Flüssigkeitsbreite und angemessene Höhen zu erhalten, auf die wir uns verlassen können.

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

.videowrapper {
  Position: Relativ;
  Padding-Bottom: 56,25%; / * 16: 9 */
  Höhe: 0;
}
.Videowrapper iframe {
  Position: absolut;
  Top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
}

Es gibt eine clevere Anpassungsmethode, mit der Sie das Seitenverhältnis direkt von HTML anpassen können, z. B.:

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

.videowrapper {
  ...
  /* Fallback zu 16/9, ansonsten das Verhältnis von html*/verwenden
  Padding-Bottom: Calc (var (-Aspektverhältnis, .5625) * 100%);
}

 .Videowrapper iframe,
.videowrapper einbettet,
.VideOWrapper -Objekt {}

Aber ... Seitenverhältnis, alte Inhalte, nicht-technische Benutzer usw.

Die obige Technik ist großartig, hat aber einige mögliche Einschränkungen:

1. Es erfordert ein Wrapper -Element, daher ist das Kopieren und Einfügen von Code direkt von YouTube nicht möglich. Benutzer müssen schlauer sein.
2. Wenn Sie alte Inhalte haben und zu Flüssigkeiten neu gestalten, benötigen alle alten Videos HTML -Optimierungen.
3. Alle Videos erfordern das gleiche Seitenverhältnis. Andernfalls werden sie auf verschiedene Seitenverhältnisse gegossen und Sie erhalten "Bars". Alternativ benötigen Sie eine anwendbare Toolbox der Klassennamen zum Anpassen, die zusätzliche Komplexität ergibt.

Wenn eine dieser Beschränkungen für Sie gilt, sollten Sie eine JavaScript -Lösung verwenden.

Stellen Sie sich vor: Wenn die Seite geladen wird, werden alle Videos angezeigt und das Seitenverhältnis gespeichert. Wenn Sie sofort einmal die Größe des Fensters ändern, werden alle Videos geändert, um die verfügbare Breite zu füllen und ihr Seitenverhältnis aufrechtzuerhalten. Mit der Jquery JavaScript -Bibliothek sieht sie so aus:

 // Alle YouTube -Videos finden // diesen Selektor für Vimeo und alle anderen Inhalte erweitern var $ alvideos = $ ("IFrame [src^= '// www.youtube.com']"),

  // Das Element der Flüssigkeitsbreite $ fluidel = $ ("Körper");

// Berechnen und speichern Sie das Seitenverhältnis jedes Videos $ alvideos.each (function () {

  $ (this)
    .Data ('Aspectratio', this.height / this.width)

    // und entfernen Sie die hartcodierte Breite/Höhe.RemoveAttr ('Höhe')
    .RemoveAttr ('Breite');

});

// Wenn das Fenster geändert wird, $ (Fenster) .Resize (function () {

  var newwidth = $ fluidel.width ();

  // Passen Sie die Größe aller Videos anhand des Seitenverhältnisses jedes Videos $ alvideos.each (function () {an.

    var $ el = $ (this);
    $ el
      Widthe (New Width)
      .Height (newwidth * $ el.data ('asspectratio');

  });

// Start Die Größe einmal, um alle Videos zu beheben, wenn die Seite geladen wird}). Die Größe der Größe ();

Hier kommt Fitvids.js von

Zusätzlich zur Übernahme all dieser Größenarbeit schlägt Fitvids.js alle Videos durch und fügt einen HTML -Wrapper mit aktiviertem Seitenverhältnis und den erforderlichen CSS hinzu. Dies ist viel effizienter, als sich an einen Fenster zu binden, der die Größenänderung des Handlers angreift!

Verwenden Sie stattdessen reines JavaScript

Heutzutage ist JQuery nicht mehr sehr beliebt. Glücklicherweise hat Dave eine Vanilleversion (erfordert selbstproduzierte CSS):

1. Wenn nicht anders angegeben, machen alle Browser Iframe, Leinwand, Einbetten und Objekt -Tags als 300 Pixel × 150 Pixel. Auch wenn dies nicht im UA Stylesheet liegt.

Die Ausgabe behält das Originalbild und sein Format bei. Der Text wurde um einen verbesserten Fluss und die Lesbarkeit neu organisiert und gleichzeitig die ursprüngliche Bedeutung erhalten.

Das obige ist der detaillierte Inhalt vonFlüssigkeitsbreite Video. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!