fluidvids

Datum: 28. September 2016
Autor: Benjamin Hofmann


Gestern kam nichts, dafür heute wieder: fluidvids. Eine sehr kleine Library, um Video-Integrationen ohne viel Aufwand responsiv zu gestalten.

Warum ein Skript?

Nun wird sich der ein oder andere wahrscheinlich fragen, warum folgendes Konstrukt nicht ausreicht:

<div class="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/X__oo9HptN0"></iframe>
</div>
.video {
  position: relative;
  
  &:before {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0;
    padding: 62.5% 0 0 0;
    content: '';
  }
  
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
}

Ganz einfach deswegen, weil damit ein Seitenverhältnis von 16:9 vorgegeben ist und man ohne zusätzliche Klassen und eine irgendwie schlau geartete Erkennungs-Logik nicht ohne weiteres auf das klassische 4:3-Format kommt, welches z.B. bei älteren Videos auf YouTube noch gerne genutzt wird. Auch das exotischere Kino-Format 21:9 ist damit nicht abgedeckt und bei beiden eine Letterbox zu sehen.

Was tut das Skript?

Tatsächlich ermittelt fluidvids nur das Seitenverhältnis des jeweiligen Videos und baut das oben gezeigte Styling selbst, aber eben im korrekten Format. Und das Ganze in weniger als 1 KB, was ein geringer Preis für eine deutlich vereinfachte Video-Integration ist.

Das Styling von oben kann natürlich auch weiterhin im Einsatz bleiben, aber dann eben nur als Fallback für Browser ohne aktiviertes Javascript.

Wie bekommt man das Skript?

Auch dieses Skript ist über NPM installierbar und über RequireJS nutzbar, wer das nicht nutzen will/kann, hat natürlich auch die Möglichkeit es einfach per <script>-Tag einzubinden und auf die entsprechenden Video-Container anzuwenden.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


CSS Selectors and Pseudo Selectors and browser support

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Eben bin ich auf eine interessante Seite zum Thema Selektoren in CSS gestoßen, die sehr übersichtlich auflistet was geht und was nicht und vor allem in welchen Browsern dies der Fall ist. Leider ist die Seite nicht mehr ganz aktuell, aber für einen schnellen Überblick sollte sie allemal ausreichen. Und mit etwas Glück kommt auch …


Beitrag lesen
17.
Februar
2012

Fancybox: JS-Fehler mit jQuery 1.9+

Autor: Stefan Oswald


Technologie


Die letzte freie Version von Fancybox (1.3.4) beinhaltet eine Inkompatibilität mit jQuery ab Version 1.9, da dort die Unterstützung für jQuery.browser eingestellt worden ist. Darauf will das Fancybox-Script aber zugreifen. Das hat zur Folge, dass es auf der Konsole des verwendeten Browsers zu einer Fehlermeldung kommt und dass ggf. sonstiger JavaScript Code auf der Seite …


Beitrag lesen
25.
März
2014

Mit HeidiSQL per SSH-Tunel auf Live-Systeme verbinden

Autor: Stefan Oswald


Technologie


Unsere Produktiv-Systeme akzeptieren aus Sicherheitsgründen keine Verbindungen mit dem MySQL-Server von externen Adressen. Dennoch möchte man manchmal mit einem anderen Tool als phpMyAdmin auf die Datenbanken sehen. Die Lösung hierfür ist ein SSH-Tunnel. Einfacher Hintergrund: Statt auf den normalen MySQL-Port verbinden wir uns über den SSH-Server mit dem Zielsystem. Dort angekommen können wir uns mit …


Beitrag lesen
23.
April
2012

Bug in Netbeans 8.0.1 und Lösung

Autor: Bastian Schwarz


Technologie


Wie einige mitbekommen haben hatte ich nach dem Update auf Netbeans 8.0.1 kein Autcomplete mehr und auch alle anderen Sachen wie Open Class, Navigation etc. gingen nicht mehr. Heute habe ich endlich eine Lösung gefunden: https://netbeans.org/bugzilla/show_bug.cgi?id=247026 Readers Digest: Offenbar gab es Änderungen wie der Index geschrieben wird, dieser sollte das erkennen und sich neu aufbauen. …


Beitrag lesen
23.
Sep.
2014