WordPress – Responsive Header Video

Responsive DesignDas WordPress Twenty Seventeen Theme unterstützt von Haus aus die Einbindung von Videos in den Header. Ich nutze dies ja schon länger und präsentiere die schönsten Bilder des Hubble Space Teleskops. Was mich allerdings immer gestört hat, war die Tatsache, dass sich der Header zwar responsive der Fenster- bzw. Bildschirmgröße anpasst, die Größe des Videos aber nicht in allen Fällen folgt. Das liegt daran, dass der Videoplayer als iFrame eingebunden wird und das Seitenverhältnis des Videos beibehält. Schwarze Streifen an den Seiten oder am oberen und unteren Rand sind die Folge.

Aber natürlich gibt es hierfür Lösungen. Es gibt einige Plugins aus der Kategorie Slider, die diesen Punkt adressieren und auch optisch ansprechende Lösungen implementieren. Allerdings ist der Footprint dieser Plugins teilweise immens und da ich auf die Geschwindigkeit der Webseite zu meinem Buch großen Wert lege – und daher auch eine sehr schlankes Theme nutze – ist der Einsatz eines Slider-Plugins auf der Startseite für mich keine Option. Zum Glück bietet sowohl CSS als auch Javascript genug Möglichkeiten, direkt einzugreifen und den eingebetteten iFrame in die kaskadierte Größenanpassung einzubinden. Schauen wir uns zwei mögliche Lösungsansätze einmal etwas genauer an.

Browser Detection mit Javascript

Leider wird die weiter unten vorgestellte CSS-basierte Lösung nicht von allen Browsern unterstützt. Daher müssen wir erst einmal feststellen, in welchem Browser die Webseite aktuell gerendert wird, um die CSS-Regeln browserspezifisch zu gestalten – ja, sollte man eigentlich nicht machen.
Anyway, die Detektion des Browsers geht am besten mit einem kurzen Javascript-Snippet. Sodann wird der detektierte Browser als Klasse an das Root-Element – also den html-Tag – gebunden und kann damit in CSS-Selektoren als Diskriminator genutzt werden.

function isChrome() {
  var isChromium = window.chrome,
      winNav = window.navigator,
      vendorName = winNav.vendor,
      ua = winNav.userAgent;
      isIOSChrome = ua.match("CriOS");
 
  return (isIOSChrome || (ua.indexOf('Chrome') > -1) ||
          (isChromium !== null &&
           typeof isChromium !== "undefined" &&
           vendorName === "Google Inc."));
}
 
function detectBrowser() {
  var ua = window.navigator.userAgent;
  var is_explorer10 = ua.indexOf('MSIE') > -1;
  var is_explorer11 = ua.indexOf('Trident/') > -1;
  var is_edge = ua.indexOf('Edge/') > -1;
  var is_firefox = ua.indexOf('Firefox') > -1;
  var is_safari = ua.indexOf("Safari") > -1;
  var is_opera = ua.toLowerCase().indexOf("opr") > -1;
  var is_chrome = isChrome();
 
  if (is_chrome && is_safari) { is_safari = false; }
  if (is_chrome && (is_opera || is_edge)) { is_chrome = false; }
 
  var root = document.getElementsByTagName( 'html' )[0];
 
  root.className +=
    (is_explorer10) ? ' browserIExplorer iexplorer10' :
    (is_explorer11) ? ' browserIExplorer iexplorer11' :
    (is_edge) ? ' browserEdge edge' :
    (is_chrome) ? ' browserChrome chrome' :
    (is_firefox) ? ' browserFireFox firefox' :
    (is_safari) ? ' browserSafari safari' :
    (is_opera) ? ' browserOpera opera' : '';
}
 
detectBrowser();

 
Dieses Skript muss unbedingt in den Head eingebunden werden, damit die generierten CSS-Klassen auch beim Rendern zur Verfügung stehen.

Alternative 1: Kopplung des iFrame-Containers mittels CSS

Nun definieren wir die CSS-Regeln, die den iFrame-Container an des Resizing des übergeordneten div-Elements koppeln. Dies geschieht natürlich nur für die unterstützten Browser.

Hinweis: Im vorliegenden Beispiel wird das Verhalten nur für den Desktop-Breakpoint implementiert. Das ist aber willkürlich und von Theme zu Theme verschieden. Für Mobile Devices sollte man grundsätzlich auf Videos verzichten, sonst ist das Bandbreitenguthaben schnell verbraucht.

@media screen and (min-width: 48em) {
  .chrome #wp-custom-header,
  .firefox #wp-custom-header,
  .safari #wp-custom-header,
  .opera #wp-custom-header {
    position: relative;
    padding-bottom: 56.25%; /* Video size ratio 16:9 */
    padding-top: 10px;
    height: 0;
  }
 
  .chrome #wp-custom-header iframe,
  .firefox #wp-custom-header iframe,
  .safari #wp-custom-header iframe,
  .opera #wp-custom-header iframe {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
  }
}

 
Mit der letzten Regel implementiere ich einen armseligen Ersatz für die im CSS fehlende cover -Positionierung von eingebetteten Elementen. Diese äußerst praktische Form der Positionierung eingebetteter Elemente wird imho leider nur für Bilder unterstützt.

Alternative 2: Resizing des iFrame-Containers mittels Javascript

Alternativ zur CSS-Lösung kann auch eine Javascript Funktion genutzt werden. Dies hat allerdings den Nachteil, dass bei Größenänderung des Browser-Fensters je nach Rechnerleistung störende Effekte wie Flackern auftreten können.

jQuery(document).ready(function( $ ) {
  var vContainer = $("#wp-custom-header-video");
 
  if (typeof vContainer == "object") {
    $(window).resize(function() {
      var vRatio = 9.0 / 16.0; // Video size ratio 16:9;
      var vHeight = $(window).height();
      var vWidth = $(window).width();
 
      if (vRatio > (vHeight / vWidth)) {
        vContainer.width(vWidth);
        vContainer.height(vWidth * vRatio);
      } else {
        vContainer.height(vHeight);
        vContainer.width(vHeight / vRatio);
      }
    });
  }
});

 


Erfolgreich getestet habe ich die CSS-Variante auf aktuellen Versionen von Chrome, FireFox, Safari und Opera. Leider funktionieren diese Lösungen nicht auf Microsoft Browsern. Wenn jemand einen Tipp für mich hat, wie ich auch IE 10-11 und Edge unterstützen kann, bedanke ich mich mit einem E-Book.

Es gibt noch einige weitere Tipps rund um WordPress in diesem Blog. Bei Interesse findet Ihr die hier.

Like
Like Love Haha Wow Sad Angry

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.