---
title: "CSS-Tipp: Eingebettete Videos für responsive Webdesigns optimieren"
author: "Ellen Bauer"
date: 2011-09-06
lang: de
source: https://elmastudio.de/css-tipp-eingebettete-videos-fur-responsive-webdesigns-optimieren/
---

# CSS-Tipp: Eingebettete Videos für responsive Webdesigns optimieren

Schon seit einer Weile habe ich nach einer praktischen Lösung gesucht, um über iframe eingebettete YouTube- oder Vimeo-Videos für responsive Layouts zu optimieren. Die Video-Player lassen sich zwar auch standardmäßig mit Hilfe der CSS-Eigenschaft max-width:100%; skalieren, aber leider entsteht so immer ein unschöner schwarzer Balken, wenn man das Video auf einem kleinen Bildschirm oder auf einem Smartphone anschaut.

Daher war ich besonders froh über den Artikel ["CSS: Elastic Videos"](https://webdesignerwall.com/tutorials/css-elastic-videos), den Nick La neulich bei Web Designer Wall zu diesem Problem veröffentlicht hat. Inzwischen habe ich die Lösung für elastische Videos selbst getestet und eine kleine Zusammenfassung hier vorbereitet.

## Der benötigte CSS Code

Um ein eingebettetes Video in einem responsive Webdesign zu nutzen, musst du den iframe-Code in einem zusätzlichen Div-Container einschließen. Diesem Div-Container gibst zu z.B. die CSS-Klasse **"elastic-video"**.

Die CSS-Klasse sollte folgende CSS-Eigenschaften haben:

```
.elastic-video {
	position: relative;
	padding-bottom: 55%;
	padding-top: 15px;
	height: 0;
	overflow: hidden;
}
.elastic-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
```

Durch den padding-bottom Wert von 55% wird der eingebettete Video-Player jetzt gleichmäßig skaliert. Der Code für dein Video sieht dann z.B. so aus:

```
<div class="elastic-video"><iframe src="https://player.vimeo.com/video/27359051?byline=0&amp;portrait=0" width="610" height="343" frameborder="0"></iframe></div>
```

Hier das eingebettete Video als Beispiel:

https://vimeo.com/27359051

*Indem du das Browser-Fenster kleiner skalierst, kannst du die optimierte Skalierung des Video-Players sehen.*

Zum Vergleich hier auch noch einmal das eingebettete Video **ohne** den zusätzlichen Div-Container mit der Klasse .elastic-video:

<https://player.vimeo.com/video/27359051?byline=0&portrait=0>

*Beim Verkleinern des Browser-Fensters wird hier der schwarze Balken oberhalb und unterhalb des Videos sichtbar.*

## Die Breite des Videos festlegen

Das Problem ist allerdings, dass dein eingebettetes Video jetzt immer auf die volle Breite seines Eltern-Divs skaliert wird (in diesem Fall also auf die komplette Artikel-Breite). Möchtest du dies nicht, benötigst du einen weiteren Div-Container, mit dem du den .elastic-video Div umschließt. Z.B.:

```
<div class="elastic-video-wrapper"><div class="elastic-video"><iframe src="https://player.vimeo.com/video/27359051?byline=0&amp;portrait=0" width="500" height="281" frameborder="0"></iframe></div></div>
```

Über die CSS-Klasse elastic-video-wrapper kannst du jetzt über die CSS-Eigenschaft "width" eine feste Breite für dein Video bestimmen:

```
.elastic-video-wrapper {
	width: 500px;
	max-width: 100%;
}
```

Das Video ist nun maximal 500 Pixel breit:

https://vimeo.com/27359051

## Das WordPress Plugin Raw HTML nutzen

Falls du Probleme bei der direkten Einbindung des Video-Embed Codes haben solltest (manchmal wird der iframe Code bei der Einbindung über den Texteditor von WordPress quasi verschluckt), kannst du das WordPress-Plugin ["Raw HTML"](https://wordpress.org/plugins/raw-html/) testen. Mit Hilfe des Plugins sollte die Integration des Video-Codes über den WordPress HTML-Editor eigentlich kein Problem mehr sein.

Hast du Fragen oder weitere Optimierungs-Vorschläge zum Einbetten von Videos in einem responsive Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr!