Responsiv mit CSS: object, iframe, embed, video und mehr (Bootstrap 3 / 4 und allgemein CSS)
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....