Responsiv mit CSS: object, iframe, embed, video und mehr

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....

Beitrags-Schlagworte

PHP CSS Bootstrap Responsiv Schnipsel SASS / SCSS

Kategorien: Hauptkategorie: Schnipsel; Kategorie: Sonstiges
Datum-Infos: Erstellt: 08.04.2016; Aktualisiert: 28.02.2020

Sonstige (Schnipsel)