Einige CSS-Tricks kursieren im Internet, mit denen man bspw. eingebettete Flash-Videos responsiv auf die Webseite bekommt. Problem ist ja immer die Höhe und Breite beim Skalieren passend hinzubekommen. Ab Bootstrap 3 sind ein paar CSS-Klassen schon integriert, die für bestimmte Ratios (Seitenverhältnisse) passen. Mit einer Berechnung kann man eigene CSS-Klassen für beliebige Ratios ermitteln.
Problem beim Embedden
Ich erzähl mal aus dem Leben. Ein Kunde kann nicht loslassen und will gegen alle Empfehlungen weiterhin Flash-Filme im SWF-Format auf seiner Joomla-Seite anzeigen, die nun bei einem Relaunch responsiv / mobilfähig werden soll. EIn Modul für die grundlegende Einbindung ist bereits installiert (mod_swfobject), das die gute, alte JavaScript-Bibliothek swfobject.js für das einbetten der Filme verwendet.
Problem dabei, das Modul, ebenfalls älteren Datums, erwartet fixe Höhen- und Breitenangaben in den Einstellungen, besser: das JS will das so. Erzeugt wird damit im Zusammenspiel mit obigem JavaScript folgender Ausgabecode, also ein OBJECT
-Container für das Video:
<div class="swf"> <object width="905" height="452" type="application/x-shockwave-flash" data="http://example.org/images/videos/header_v8-startseite.swf" id="flashid" style="visibility: visible;"> <param name="menu" value="false"> <param name="wmode" value="opaque"> <param name="allowscriptaccess" value="sameDomain"> <param name="bgcolor" value="#000000"> <param name="quality" value="high"> </object> </div>
Nichts gegen einzuwenden, wenn wir uns auf einer statischen, nicht-responsiven Seite befinden.

Responsiv mit Bootsrap 3 und 4
Wer Bootstrap ab Version 3 verwendet, bekommt das nun ganz schnell responsiv, indem man nur die passenden CSS-Klassen in sein HTML einsetzt, VORAUSGESETZT
- Bootstrap 3: das Video hat ein Standard-Seitenverhältnis (Aspect Ratio) von 16:9 oder 4:3
- Bootstrap 4: das Video hat ein Standard-Seitenverhältnis (Aspect Ratio) von 21:9, 16:9, 4:3 oder 1:1
Für alle diese Seitenverhältnisse verwendet man für den das OBJECT
umgebende HTML-Element die Bootstrap-Klasse embed-responsive
.
Für 4:3 zusätzlich die Klasse embed-responsive-4by3,
für 16:9, wie im folgenden Codebeispiel zu sehen, zusätzlich embed-responsive-16by9
.
<div class="swf embed-responsive embed-responsive-16by9"> <object width="905" height="452" type="application/x-shockwave-flash" data="http://example.org/images/videos/header_v8-startseite.swf" id="flashid" style="visibility: visible;"> <param name="menu" value="false"> <param name="wmode" value="opaque"> <param name="allowscriptaccess" value="sameDomain"> <param name="bgcolor" value="#000000"> <param name="quality" value="high"> </object> </div>
Keine übliche Standard-Ratio?
Wer unten das CSS der beiden Bootstrap-Versionen vergleicht, stellt fest, dass BS4 mit padding-top
und ::before
arbeitet, BS3 mit padding-bottom
und ohne ::before
arbeitet. Das immer beachten, wenn man eigene CSS-Klassen wie im folgenden Beispiel "berechnet"/verwendet!! Das Beispiel basiert auf BS3, also wird verwendet: padding-bottom
Für Bootstrap-4-Nutzer, die SASS verwenden: Siehe zusätzlich unten.
Und, wenn das Video kein Standardseitenverhältnis hat, sondern irgendwas Krummes? Auch ganz leicht. Wir müssen aus den Seitenverhältnissen einen Prozentwert berechnen:
(Höhe / Breite) * 100
In einem Override des obigen Moduls mache ich das bspw. so
... $height = (int) $params->get('height'); $width = (int) $params->get('width'); $paddingB = ($height / $width) * 100; ?> <style> .embed-responsiv-custom{ padding-bottom: <?php echo $paddingB; ?>%; } </style> <div class="swf embed-responsive embed-responsiv-custom"> ...
In Zeilen 2 bis 3 hole ich Höhe und Breite, die im Modul eingegeben wurde. Im obigen Beispiel ist das 452 und 905.
In Zeile 4 berechne ich das prozentuale Verhältnis.
In Zeile 7 füge ich plump eine CSS-Definition ins HTML ein, auch wenn das nach wie vor nicht W3C-valide ist und definiere eine neue CSS-Klasse .embed-responsiv-custom. Diese erhält in Zeile 8 ein padding-bottom aus unserem berechneten Wert. Beachten Sie das angehängte Prozent-Zeichen!
In Zeile 11 kommt die eigene Klasse zum Einsatz in Kombination mit Bootstraps embed-responsive.
Wer das in diesem Falle unzeitgemäße Geschreie vom W3C-Validator scheut, kanns mit einem style-Attribut machen. Beachten Sie das angehängte Prozent-Zeichen!
Nur für die Bootstrap-3-Variante geignet!
... $height = (int) $params->get('height'); $width = (int) $params->get('width'); $paddingB = ($height / $width) * 100; ?> <div class="swf embed-responsive" style="padding-bottom: <?php echo $paddingB; ?>%;"> ...
Für Nutzer von Bootstrap 4 mit SASS (*.scss)
Während BS3 fertige CSS-Klassen nur für die Aspekt-Ratios (Seitenverhältnisse) 16:9 und 4:3 dabei hat, kommt BS4 zusätzlich mit 21:9 und 1:1 daher.
Wer mit BS4 und SASS (*.scss) arbeitet, kann weitere Ratios bequem über eine eigene variables-Datei hinzufügen, die vor der BS4-Original _variables.scss geladen werden muss, wenn man die oben genannten vier Ratios in die eigene Datei nicht noch mal selbst eintragen will. Für eigene Ratios hinterlegt man für die Variable $embed-responsive-aspect-ratios
z.B.:
$embed-responsive-aspect-ratios: ( (17 8), (22 6), (88 13), (10 11), (905 452) );
Im Code habe ich als letztes einfach die realen Pixel-Verhältnisse des obigen OBJECT
-Beispiels eingetragen. Geht also auch und wie man folgend sieht, wird die Klasse embed-responsive-905by452
von SASS mit korrekten Prozentwert berechnet.
In der kompilierten CSS-Datei findet man anschließend diese Klassen. Vier aus der BS4-Original-Variables-Datei und weitere aus der eigenen:
.embed-responsive-21by9::before { padding-top: 42.8571428571%; } .embed-responsive-16by9::before { padding-top: 56.25%; } .embed-responsive-4by3::before { padding-top: 75%; } .embed-responsive-1by1::before { padding-top: 100%; } .embed-responsive-17by8::before { padding-top: 47.0588235294%; } .embed-responsive-22by6::before { padding-top: 27.2727272727%; } .embed-responsive-88by13::before { padding-top: 14.7727272727%; } .embed-responsive-10by11::before { padding-top: 110%; } .embed-responsive-905by452::before { padding-top: 49.9447513812%; }
SASS hat einem also die oben beschriebene Berechnung abgenommen.
Kein Bootstrap 3 oder 4?
Auch kein Problem. Man kann die Klassen in jedweder CSS-Datei integrieren. Und selbst berechnete/erstellte hinzufügen.
Die CSS-Version, geklaut aus BS3
.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; } /* Modifier class for 16:9 aspect ratio */ .embed-responsive-16by9 { padding-bottom: 56.25%; } /* Modifier class for 4:3 aspect ratio */ .embed-responsive-4by3 { padding-bottom: 75%; } .embed-responsive-21by9 { padding-bottom: 42.8571428571%; } .embed-responsive-1by1 { padding-bottom: 100%; }
Wie man in Zeilen 8 bis 12 sieht, kann man die Klassen nicht nur für OBJECT
-, sondern auch für IFRAME
-, EMBED
-, VIDEO
-Elemente out-of-the-box verwenden, sowie für andere Elemente, denen man dann die CSS-Klasse embed-responsive-item
geben muss.
Moderner: Die CSS-Version, geklaut aus BS4
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .embed-responsive::before { display: block; content: ""; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive-21by9::before { padding-top: 42.8571428571%; } .embed-responsive-16by9::before { padding-top: 56.25%; } .embed-responsive-4by3::before { padding-top: 75%; } .embed-responsive-1by1::before { padding-top: 100%; }
Die LESS-Version, wer mag (Bootstrap-3-Variante)
.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; .embed-responsive-item, iframe, embed, object, video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; } } // Modifier class for 16:9 aspect ratio .embed-responsive-16by9 { padding-bottom: 56.25%; } // Modifier class for 4:3 aspect ratio .embed-responsive-4by3 { padding-bottom: 75%; } .embed-responsive-21by9 { padding-bottom: 42.8571428571%; } .embed-responsive-1by1 { padding-bottom: 100%; }
Crux
Bisschen nachjustieren wird man bei dem oben berechneten padding-bottom
häufiger mal müssen. Oben berechnetes
<style> .embed-responsiv-custom{ padding-bottom: 49.944751381215%; } </style>
wird kein Browser exakt umsetzen können. Schicksal! Wer Krummes will....