Reframe.js Notizen | CSS-Tricks

FitVids.js ist immer noch ein perfekt funktionierendes Mini-Plugin, um Videos (oder alles andere) responsiv zu gestalten. Sie benötigen es oder etwas Ähnliches für Websites, die Dinge wie YouTube- oder Vimeo-Videos, Instagram-Einbettungen oder eigentlich alles, was nicht im Verhältnis der Seitenverhältnisse responsiv ist, enthalten. <img>/<video> passen ihre Breite/Höhe in einem seitenverhältnis-freundlichen Weg an, <iframe>/<canvas>/<object> tun das nicht.

Reframe.js ist eine Art modernisierte Version von FitVids.

Es ist bower- und npm-freundlich.
Sie können es requiren.
Es benötigt kein jQuery.

Obwohl sie weitgehend dasselbe tun, gibt es einige geringfügige Unterschiede

FitVids injiziert die benötigten CSS-Daten, während Reframe erwartet, dass Sie diese zu Ihrer Stylesheet hinzufügen.
Sie rufen FitVids auf einem Container auf, um darin nach Elementen zu suchen. Sie geben Reframe direkt Selektoren. Sie können anpassen, was gefunden wird, und mit beiden filtern.

Als wir es tweeteten, gab es mehrere Antworten wie

Warum sollte man das verwenden, wenn man auch den Padding-Hack benutzen kann?

Tatsächlich verwenden beide den Padding-Hack oder „intrinsische Verhältnisse“. Wickeln Sie ein Container-Element um das Ding, machen Sie es height: 0; padding-top: 56.25%; position: relative; und positionieren Sie dann das Element darin absolut, um es vollständig zu bedecken. Aber auf diese Weise bedeutet das

Sie müssen das Wrapper-Element selbst in Ihren Inhalt einfügen.
Alles, was Sie einbetten, sollte 16:9 sein.

Die Verwendung einer dieser Bibliotheken bedeutet

Der Wrapper wird für Sie injiziert.
Was Sie einbetten, wird gemessen und das richtige Seitenverhältnis angewendet.

Beide sind wertvoll. Ich möchte keine Div-Wrapper von Hand schreiben, ich möchte einfach nur Einbettungscode kopieren und einfügen. Und nicht alle Dinge sind 16:9.

Kommentare

zzzzBov

# 19. September 2016

nicht alle Dinge sind 16:9

Ich verwende eine Auswahl gängiger voreingestellter Seitenverhältnisse, was meiner Meinung nach eine lesbare Syntax hat:

<div data-aspect-ratio="16:9">...</div>
<div data-aspect-ratio="4:3">...</div>

Ich möchte keine Div-Wrapper von Hand schreiben...

Amen dazu.

Ich bevorzuge die Verwendung von Markdown und einer Reihe von Post-Prozessoren, die verschiedene Verschönerungen hinzufügen. Einbettungen sind serverseitig oft einfach zu handhaben (Beispiel verwendet cheerio in Node)

const $ = cheerio.load(html);
$('iframe[src^="http://www.youtube.com"]').wrap('<div data-aspect-ratio="16:9">');
return $.html();

Sicherlich zeigt dieser Code nicht, wie mit verschiedenen Seitenverhältnissen bei Einbettungen umgegangen wird, aber das kann auch leicht hinzugefügt werden.

Karl Brown

# 20. September 2016

Alles, was Sie einbetten, sollte 16:9 sein.

Sie können einige Klassen schreiben, um verschiedene Seitenverhältnisse für Sie zu handhaben – ich habe einen Pen, bei dem das minimierte CSS weniger als 350 Bytes beträgt: http://codepen.io/KBD/pen/EVGjYG

Wenn Sie etwas programmieren, das eine Komponente in einem CMS werden kann, oder wenn Sie bereits eine Video-Player-Komponente in einem CMS haben, müssen Sie sich keine Sorgen machen, jedes Mal den Wrapper hinzuzufügen.

Dies lässt mich jedoch darüber nachdenken, warum es keine aspect-ratio Regel in CSS gibt. So etwas wie

  .video {
    width: 100%;
    height: aspect-ratio(16,9)
  }

was die Höhe als 9 Einheiten hoch für jede 16 Einheiten breit berechnen würde. Wenn Sie eine explizite Breite haben (z. B. 16rem), wäre sie 9rem hoch.

Vanderson

Permalink to comment# 20. September 2016
Das wird es tun. :)

Es ist das Konzept, das ich verwende, um Diashows unabhängig von der Bildschirmgröße im selben Verhältnis zu halten.
```
.video {
  width: 100%;
  height: calc( 100vw * (9  / 16));
}
```

Andrew Myers

# 20. September 2016

Der Grund, warum ich es vorziehe, für diese Art von Dingen kein JavaScript zu verwenden, ist, dass ich besessen von progressive enhancement bin. HTML hat Basisinhalte, CSS lädt als nächstes mit Basis-Styling und schließlich fügt JavaScript hinzu, was auch immer es tut. Wenn etwas früher in der Pipeline (von CSS statt JS) gehandhabt werden kann, sollte es so gemacht werden, damit mehr Benutzer es verwenden können. Dies fällt wahrscheinlich auch unter die Trennung von Zuständigkeiten.

Wenn JavaScript ausgeführt werden muss, um etwas korrekt groß zu machen, haben Sie zwei Optionen

Verwenden Sie render-blocking JavaScript, was die Seite verlangsamt
Lassen Sie die Seite falsch aussehen, bis JavaScript geladen wird und sie korrigiert

Wenn Sie es nur mit CSS handhaben, vermeiden Sie beide Probleme.

Um die Berechnung von Prozentwerten für eine Padding-Box von Hand zu umgehen, können Sie Sass verwenden

@function aspect-ratio($width, $height) {
  @return $height / $width * 100%;
}

.video {
  position: relative;
  width: 100%;
}

  .video--16-9 {
    padding-top: aspect-ratio(16, 9);
  }

  .video--24-7 {
    padding-top: aspect-ratio(24, 7);
  }

Wenn Sie es mit BEM kombinieren, können Sie schnell eine neue Video-Größe erstellen, wann immer Sie sie benötigen. Inuit.css hat ein Ratio-Objekt, das so etwas tut.

Jeff Wainwright

# 21. September 2016

Ich habe reframe.js vor ein paar Tagen geschrieben & hatte nicht mit der Menge an Feedback gerechnet, die es bekommen hat. Es war sehr besonders für mich (danke Chris). Ursprünglich wurde es geschrieben, weil wir auf einem Produkt, an dem ich arbeite, kein jQuery verwendet haben.

Dann erkannte ich mit rollup.js & dem Entfernen einiger angenommener Dinge, dass ich den Code für meine Zwecke etwas schlanker gestalten könnte.

Ich schätze den oben diskutierten Ansatz intrinsic ratio css mixin, aber das funktionierte für meinen Anwendungsfall nicht.

Nun habe ich gerade eine großartige Frage im reframe.js GitHub-Repo erhalten, bezüglich Problemen, die bei iframes auftreten, wenn sie im DOM verschoben werden. Ich habe eine weitere Version des Plugins geschrieben, die keinen Div-Wrapper benötigt, aber anders funktioniert.

Hat jemand Ideen/Meinungen, wie man diese Art von Änderung am besten angehen kann?

~Danke

zim

Permalink to comment# 28. September 2016

Ich arbeite an einem E-Mail-Templating-Produkt und wir befassen uns viel mit iframes und gezogenen iframes und wir haben festgestellt, dass der einzige Weg, um Bugs zu vermeiden, die iframes auf Standard zurücksetzen, wenn sie im DOM verschoben werden, darin besteht, ihren Zustand zu speichern, wenn der Drag beginnt, und ihn nach Abschluss des Drags wiederherzustellen.
Wir haben WYSIWYG-Editoren für diese iframes, also wird beim Beginn des Drags der Editor-Details (Inhalt und so weiter) gespeichert, dann wird der Editor zerstört. Wenn der Drag endet, wird der Editor neu erstellt und der Inhalt eingefügt.

Tommy

# 26. September 2016

Ich muss oft responsive Video-Einbettungen implementieren und anstatt den „Padding“-Hack zu versuchen, kopiere ich einfach den Einbettungscode direkt von YouTube oder Vimeo mit den width="" und height="" Attributen intakt und verwende JS, um die richtige Höhe für das Element zu berechnen, während sich die Breite anpasst, um seinen Container responsiv auszufüllen: http://codepen.io/tomhodgins/pen/PZqaLm

In einem anderen Beispiel ist das gewünschte Seitenverhältnis in einem benutzerdefinierten Datenattribut namens data-ratio="" gespeichert und wird von (JS und) CSS gelesen, und die richtige Höhe wird anhand der gleichen Formel berechnet: http://codepen.io/tomhodgins/pen/XKJpYr

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.