Digital Tourism Blog

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.