fluidvids

Datum: 28. September 2016
Autor*in: 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


Styling von Checkboxen und Radiobuttons

Autor*in: Benjamin Hofmann


Technologie   //   User Experience & Design


Wieder einmal ein Linktipp: Customizing web forms with CSS3 and WebKit Leider funktionieren diese Styles, so wie sie im Artikel dargestellt werden, nur in WebKit-basierten Browsern, also im Safari, Chrome oder den Standard-Browsern von Android und iOS. Aber wenn diese Styles nicht angewandt werden können springt der jeweilige Browser auf die normale Darstellung zurück, wie …


Beitrag lesen
23
FEB
12

Java-Orbit 2024

Autor*in: Tobias Pfannkuche


Technologie   //   Über den Tellerrand


Foto von Nicolas Gras auf Unsplash

Der Hype der vergangenen Jahre rund um AI lässt spürbar nach, die immer noch verhältnismässig junge Technologie hat den Einzug in den Alltag gerade auch in der Software-Entwicklung gefunden und steht nun vor der Herausforderung, sich zu bewähren. So wie davor zahlreiche andere technologische Entwicklungen und Veränderungen.


Beitrag lesen
18
NOV
24

Grunt concurrent und time-grunt

Autor*in: Florian Müller


Technologie


Gestern Abend bin ich auf einen Artikel gestoßen, welcher sich mit der Optimierung von Grunt Tasks beschäftigt hat. Vieles davon ist schon im Einsatz, aber eins hat dann doch noch gefehlt – die Parallelisierung. Dies habe ich heute morgen testweise bei einem Projekt integriert. Um vergleichbare Ergebnisse zu bekommen, welche unabhängig von anderen Build Tasks des …


Beitrag lesen
29
SEP
16

Kundenworkshop imx.Platform 3

Autor*in: Christine Pfleger


infomax   //   Strategie & Konzeption   //   Technologie   //   Tourismus   //   Über den Tellerrand   //   User Experience & Design


Kundenworkshop GUI imx.Platform 3
Kundenworkshop GUI imx.Platform 3

Am 29. Mai 2019 haben wir den „Power-Usern“ unter unseren Kunden, also denjenigen, die am intensivsten mit dem infomax-Technologie-Framework imx.Platform arbeiten, in einem Workshop den aktuellen Stand der neuen imx.Platform 3 präsentiert, ihre Wünsche an Features und Usability diskutiert und diese priorisiert in eine Roadmap überführt.


Beitrag lesen
29
MAI
19