05.07.2016 -

Responsive Webdesign – Auch bei Videos!

Responsive Webdesign (RWD) ist die Anpassung des Designs an das jeweilige Display des Clients. Vom kleinen Mobiltelefon bis zum großen Monitor wollen auch Videos im passenden Format konsumiert werden. Mit einigen CSS Tipps ist die richtige Einbettung in jedem System einfach zu realisieren. Der Weg zum Erfolg führt über eine flexible Skalierung.

Im CSS Bilder und Texte skalieren? Alles kein Problem. Doch können sich Videos auch automatisch selbst skalieren, das heißt dynamisch ihre Größe verändern? Wir gehen der Sache auf den Grund!

 

Die passende Skalierung der Inhalte

Um ein externes Video responsiv auf Ihrer Homepage zu zeigen, brauchen Sie einen Embed-Code, zu deutsch Einbettungscode. Bei YouTube gibt es diesen Code mit einem Mausklick unter der Funktion Teilen. Dort befindet sich der Reiter Einbetten. Ein Video integriert sich am einfachsten über einen zusätzlichen Div-Container im iframe-Code. Die Grunderweiterung des HTML-Codes sehen Sie hier:

<div class="responsive-video">
    <iframe width="..." height="..." src="..."> </iframe>
</div>

Die Höhe und Breite in diesem Code sind jedoch meist vorformatiert und müssen jetzt verändert werden, um eine variable Anpassungsfähigkeit zu erhalten. Es gilt einen Div-Container anzulegen, in dem später die Größe festgelegt wird. Für das Styling erweitern wir den Container im CSS mit „padding-bottom“ und können so die prozentuale Höhe des Seitenverhältnisses festlegen. Dieser padding-bottom Wert sorgt für die gleichmäßige Skalierung des Videos. Wichtig ist es, den Abstand des iFrames nach unten in das relative Verhältnis der Videogröße zu setzen. Mit der folgenden padding-bottom Einstellung wählen Sie zum Beispiel ein Seitenverhältnis von 16:9.

 .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

 
Vorteile des responsiven Webdesigns

Videos von Plattformen wie YouTube oder Vimeo sind dynamische Eyecatcher, die Ihre Webseite beleben. Ein einziges passendes Design für alle Displayformate erleichtert die Pflege enorm. Keine verschiedenen Versionen für verschiedene Endgeräte bedeutet auch keine extra Pflege unterschiedlicher Systeme.

Greift man lediglich auf die CSS- Einstellung max-width:100% kann beim Ansehen auf einem kleineren Display ein unerwünschter Balken bzw. Rand entstehen. Durch die Angabe des entsprechenden Seitenverhältnisses (etwa 16:9 oder 2:1) im Container ist die Darstellung mit der Größe des Videos und iFrames stimmig.

© EGARA-CMS ist ein urheberrechtlich geschütztes Produkt der DREIWERKEN GmbH - Ihrer Werbeagentur für Online- und Print-Medien aus Kolbermoor (bei Rosenheim).