Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

SonstigeSchnipsel

Einige CSS-Tricks kursieren im Internet, mit denen man bspw. eingebettete Flash-Videos responsiv und fluid auf die Webseite bekommt. Problem ist ja immer die Höhe und Breite beim Skalieren passend hinzubekommen. In Bootstrap 3 sind entsprechende CSS-Klassen schon integriert, die für 16:9 und 4:3-Ratio passen. Mit einer kleinen PHP-Berechnung kann man auch andere Seitenverhältnisse "bedienen".

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.

SWF-Video mit fixer Breite und Hoehe.
SWF-Video mit fixer Breite und Hoehe.

Responsiv mit Bootsrap 3

Wer Bootstrap 3 verwendet, bekommt das nun ganz schnell responsiv, VORAUSGESETZT, das Video hat ein Standard-Seitenverhältnis (Aspect Ratio) von 16:9 oder 4:3. Für beide Seitenverhältnisse verwendet man für den das OBJECT umgebende HTML-Element die Bootstrap-Klasse .embed-responsive.

Für 4:3 zusätzlich .embed-responsive-4by3, für 16:9 wie im folgenden Codebeispiel zu sehen .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?

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!

...
$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; ?>%;">
...

Kein Bootstrap 3?

Die CSS-Version

Auch kein Problem. Man kann die Klassen in jedweder CSS-Datei integrieren.

.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%;
}

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 die CSS-Klasse embed-responsive-item geben muss.

Die LESS-Version, wer mag

.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%;
}

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

PHP CSS Bootstrap Responsiv Schnipsel