fluidvids

Benjamin Hofmann 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


Netbeans 7.1patch1 released

Autor: Bastian Schwarz


Technologie


Gestern wurde Netbeans 7.4patch1 released in dem auch einige PHP Fixes mit drin sind. Näheres gibt es hier: https://netbeans.org/community/news/show/1602.html Das Auto-Namespacing geht leider immer noch nicht … Gruß Bastian


Beitrag lesen
26
NOV
13

Xdebug Stacktrace verbessern

Autor: Florian Müller


Technologie


Ich habe mich heute im Zuge eines kleinen Problems mit einem Stacktrace etwas mit der xDebug Konfiguration beschäftigt. Dabei bin ich auf eine kleine nützliche Option gestoßen, welche ich euch nicht vorenthalten möchte. Die Optionen xdebug.collect_params Es gibt die Option xdebug.collect_params, welche verschiedene Level an Output ermöglicht. Ich habe mich in meiner VM für den …


Beitrag lesen
03
AUG
17

Langzeittest Serverpilot.io

Autor: Sascha Nützel


Technologie


Nachdem ich privat immer noch einige Server verwalte, wollte ich euch kurz meine seit 1,5 Jahren eingesetzte Verwaltung serverpilot.io kurz vorstellen. Zur Vorgeschichte vor ca. 2 Jahren bemerkte ich mit jedem Update von iMSCP (auch eine Verwaltung um einfach MySQL, FTP Konten, usw. einzurichten), dass immer mehr Ressourcen für diese Aufgabe „verschwendet“ wurden, die Cronjobs …


Beitrag lesen
14
NOV
16

Boah, Newsticker sind doch so…. 2016

Autor: Benedikt Keller


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29
APR
16