fluidvids

Avatar 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


Integrationskomponente imxTools Tag 2.2.0 released

Autor: Bastian Schwarz


Technologie


Heute wurden von mir, mit Vorarbeit von Bastian die Services zur Abfrage des Schneeforums bereitgestellt. Es wird als Erweiterung dazu bald noch Object-Wrapper geben, die im Portal dann verwendet werden. Diese Wrapperobjekte erfüllen zwei Ziele. Zum einen bieten sie einige Shortcuts (auf z.B. i18N-Objekte) und schon Funktionalitäten um konstante Stringwerte auf portalspezifische Resource-Keys zu mappen …


Beitrag lesen
25.
Nov.
2011

imx.Search: der neue ad-hoc Index-Update-Service

Autor: Marc Kurzmann


Technologie


Bisher war es bei imx.Search so, dass Änderungen in den Contents aus den Produkten nur nach einer kompletten Neu-Indizierung im Index verfügbar waren – üblicherweise über Nacht. Was für einen reinen Volltext-Suchmaschineneinsatz von imx.Search vielleicht noch akzeptabel ist, wenn Suchbegriffe mit einem Tag Verspätung gefunden werden, so ist es bei der Verwendung als Filter-Suchmaschine, so …


Beitrag lesen
03.
Dez.
2014

CKEditor Update im imx.CMS

Autor: Bastian Schwarz


Technologie


Demnächst kommt ein neues Release mit der neuesten Version des CKEditors. Dabei wurde ein Update von 4.4.6 auf die aktuellste 4.6.2 durchgeführt. Zusätzlich wurde die Konfiguration etwas optimiert und neue Plugins für das Bearbeiten von Tabellen eingeführt. Die Funktionalität an sich hat sich dabei natürlich nicht geändert, aber es wurden wieder einige Bugs gefixt. Außerdem …


Beitrag lesen
28.
Februar
2017

Twitter Account-ID auslesen

Autor: Stefan Oswald


Technologie


Twitter bemüht sich nach Kräften, die numerische ID seiner Benutzer-Accounts zu verstecken. Nur dumm, dass genau diese ID für die Twitter-Integration im imxSocialMediaReader benötigt wird… Früher war das kein Problem, da Twitter da noch auf der Tweet-Seite des Accounts öffentlich einen RSS-Link publizierte; das ist derzeit aber leider nicht mehr der Fall. Wie kommt man …


Beitrag lesen
20.
Oktober
2011