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.

Momentan können keine Kommentare hinterlassen werden.

DIESE KUNDEN VERTRAUEN AUF DREIWERKEN: WEBDESIGN-AGENTUR AUS ROSENHEIM

Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Website verwendet Cookies. Einige davon sind erforderlich, um die Funktionsfähigkeit der Website zu gewährleisten. Andere werden verwendet, um die Benutzerumgebung zu optimieren. Durch die Nutzung der Website stimmen Sie der Verwendung dieser Cookies zu. Weitere Informationen zu Cookies finden Sie in unserem Impressum.

Schließen