So erstellen Sie Videos mit flüssiger Breite mit CSS und jQuery

  • Kenntnisse erforderlich : Grundlegendes HTML, grundlegendes CSS, grundlegende jQuery
  • Benötigt: jQuery
  • Projektzeit: 30 Minuten
  • Support-Datei
  • Dieser Artikel und die Demo sind alle auf verfügbar GitHub .

In einer Welt reaktionsschneller und flüssiger Layouts im Web steht ein Medientyp der perfekten Harmonie im Wege: Video. Es gibt viele Möglichkeiten, wie Videos auf Ihrer Website angezeigt werden können. Möglicherweise hosten Sie das Video selbst und präsentieren es über das HTML5-Tag. Sie könnten verwenden Youtube oder Vimeo der bereitstellt

Erraten Sie, was. Das Deklarieren statischer Breiten ist in Umgebungen mit flüssiger Breite keine gute Idee. Was ist, wenn der übergeordnete Container für dieses Video schmaler als die angegebenen 400 Pixel ist? Es wird ausbrechen und wahrscheinlich lächerlich und peinlich aussehen.

Einfach und erfunden, aber immer noch lächerlich und peinlich

Einfach und erfunden, aber immer noch lächerlich und peinlich

Können wir das nicht einfach tun?

Nun ja, du kannst. Wenn Sie Standard-HTML5-Videos verwenden, passt sich das Video an die Breite des Containers an. Es ist wichtig, dass Sie die Höhendeklaration entfernen, wenn Sie dies tun, damit das Seitenverhältnis des Videos beibehalten wird, wenn es wächst und schrumpft, damit Sie keine umständlichen Balken erhalten, um den leeren Raum zu füllen (im Gegensatz zu Bildern behält das eigentliche Video seine bei Seitenverhältnis unabhängig von der Größe des Elements). Sie können über CSS dorthin gelangen (und sich keine Gedanken darüber machen, was im HTML deklariert ist):

MacBook Pro Hüllen mit Tastaturabdeckung

Video {
Breite: 100%! wichtig;
Höhe: auto! wichtig;
}}

Mit HTML5-Video ist Flüssigkeit einfach. Die Breite wird in Prozent festgelegt, damit die Größe des Containers geändert wird und die Höhe für die Fahrt mitkommt

Mit HTML5-Video ist Flüssigkeit einfach. Die Breite wird in Prozent festgelegt, damit die Größe des Containers geändert wird und die Höhe für die Fahrt mitkommt


.videoWrapper {
Position: relativ;
Polsterboden: 56,25%; / * 16: 9 * /
Polsterung: 25px;
Höhe: 0;
}}
.videoWrapper iframe {
Position: absolut;
oben: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
}}

Welchen YouTube-Iframe-Einbettungscode Sie auch in den .videoWrapper einfügen, Sie

wie man Pin-up-Art zeichnet
Unabhängig davon, welchen YouTube-Iframe-Einbettungscode Sie in den .videoWrapper einfügen, wird er in einem flüssigen 16: 9-Feld angezeigt

Aber, aber ... Seitenverhältnisse, Legacy-Inhalte, Nicht-Tech-Benutzer usw.

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

  1. Es erfordert ein Wrapper-Element, sodass nur das direkte Kopieren und Einfügen von Code von YouTube verfügbar ist. Benutzer müssen etwas sicherer sein.
  2. Wenn Sie über ältere Inhalte verfügen und diese flüssig gestalten möchten, müssen alle alten Videos HTML-Anpassungen vornehmen.
  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 Toolbox mit Klassennamen, die Sie anwenden können, um sie anzupassen. Dies ist eine zusätzliche Komplikation.

Wenn eine dieser Einschränkungen auf Sie zutrifft, können Sie eine JavaScript-Lösung in Betracht ziehen. Stellen Sie sich Folgendes vor: Wenn die Seite geladen wird, werden alle Videos angesehen und ihr Seitenverhältnis gespeichert. Sobald und wenn die Größe des Fensters geändert wird, werden alle Videos so angepasst, dass sie die verfügbare Breite ausfüllen und ihr Seitenverhältnis beibehalten. Verwendung der jQuery JavaScript-Bibliothek, die so aussieht:

// Alle YouTube-Videos finden
var $ allVideos = $ ('iframe [src ^ =' http: //www.youtube.com ']'),

// Das Element, das die Flüssigkeitsbreite ist
$ fluidEl = $ ('body');

// Finde heraus und speichere das Seitenverhältnis für jedes Video
$ allVideos.each (function () {

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

// und entferne die fest codierte Breite / Höhe
.removeAttr ('height')
.removeAttr ('width');

});

// Wenn die Fenstergröße geändert wird
$ (Fenster) .resize (Funktion () {

var newWidth = $ fluidEl.width ();

// Ändere die Größe aller Videos entsprechend ihrem eigenen Seitenverhältnis
$ allVideos.each (function () {

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

});

// Starten Sie eine Größenänderung, um alle Videos beim Laden der Seite zu korrigieren
}). resize ();

Vimeo hinzufügen

Vimeo verwendet auch Iframes. Was für YouTube funktioniert, funktioniert also für Vimeo. Die HTML / CSS-Technik muss überhaupt nicht geändert werden, und die jQuery-Lösung kann durch Ändern einer einzelnen Zeile behoben werden:

var $ allVideos = $ ('iframe [src ^ =' http: //player.vimeo.com '], iframe [src ^ =' http: //www.youtube.com ']'),

/ Video (Viddler, Blip.tv usw.)

Einige hausgemachte Video-Einbettungen sowie Video-Sharing-Dienste wie Viddler und Blip.tv verwenden verschachtelte Objekte der alten Schule und Einbettungs-Tags. YouTube hat es auch getan, das war bis vor kurzem. Es ist kein Standard, aber diese Technik wurde sehr häufig verwendet, da Flash überall war und einfach funktionierte.

Objekt / Einbettung hat das gleiche Problem wie Iframes: Breite und Höhe sind erforderlich, damit keine R & E-Ergebnisse erzielt werden.

Für eine reine HTML / CSS-Lösung können wir erneut auf Thierrys Technik zurückgreifen, wenn wir mit dem Hinzufügen von zusätzlichem HTML und dem Auferlegen eines Seitenverhältnisses einverstanden sind.

.videoWrapper {
Position: relativ;
Polsterboden: 56,25%; / * 16: 9 * /
Polsterung: 25px;
Höhe: 0;
}}
.videoWrapper-Objekt,
.videoWrapper einbetten, {
Position: absolut;
oben: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
}}

Wenn wir uns nicht mit dem zusätzlichen HTML-Wrapper und den CSS-Komplikationen beschäftigen möchten, können wir uns wieder auf JavaScript verlassen. Unser Skript kann weitgehend gleich bleiben, außer dass wir eher nach Objekt- und Einbettungselementen als nach Video- oder Iframe-Elementen suchen.

wie man Acrylfarbe auf Leinwand mischt

var $ allVideos = $ ('Objekt, einbetten'),

Und wichtig zu beachten: jQuery erlaubt nicht die Verwendung seiner .data () -Funktion für diese Elementtypen, daher müssen wir HTML5-Datenattribute verwenden, um unsere Seitenverhältnisdaten zu speichern und abzurufen. Sie könnten ein rel-Attribut oder etwas anderes missbrauchen, wenn Sie HTML5 nicht verwenden.

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

...

$ the
.width (newWidth)
.height (newWidth * $ el.attr ('data-aspectRatio'));

Alles zusammenfügen

Nehmen wir also an, wir sind in der Lage, viele Legacy-Inhalte zu haben, einschließlich Videos aller Marken und Modelle, und wir gestalten unsere Website so, dass sie flüssig ist. Die effizienteste Route besteht darin, alles, was wir in diesem Artikel gelernt haben, zu kombinieren und zusammenzustellen. Auf der Demoseite finden Sie die vollständigen Funktionen.

Chris ist ein Webdesigner, der Spaß an den neuesten und besten Webtechnologien hat. Er arbeitet gerne an allem, was Menschen hilft, insbesondere anderen Designern. Er ist 'Lead Hucklebucker' bei Wufoo ist aber meistens bekannt für CSS-Tricks .

Mochte dies? Lese das!