YouTube-Video responsive machen mit CSS (+Vimeo) 💥

Aktualisiert: 4. November 2024 | vom: Martijn Assie, erstellt seit 20 Jahren Websites und Shops, dazu Experte für Linux, Wordpress, Photoshop und SEO. | EN NL

Sie können einen YouTube-Video responsive machen sowohl mit CSS als auch mit Javascript. CSS ist viel einfacher, und so werden wir es machen. Vimeo oder Youtube machen keinen Unterschied, Sie können dies auf alle Videos anwenden.

Video responsive machen mit CSS

Rufen Sie zunächst den Einbettungscode für Vimeo oder Youtube iframe auf der Seite des Vimeo / Youtube-Videos ab und platzieren Sie ihn auf Ihrer Website. Sie erstellen ein Div darum herum, so dass es wie das unten gezeigte aussieht.

<div class="video-container"><iframe>.................</iframe></div>

Sie können Höhe und Breite aus dem Youtube-Code entfernen, wenn Sie möchten, aber Sie können ihn auch so lassen, wie es ist. Fügen Sie Ihrem CSS Folgendes hinzu:

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

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Der obere Teil konzentriert sich auf den Videocontainer und der untere Teil auf den Inhalt des Containers. In diesem Fall ist es der iframe, aber Sie können diesen Code auch für Objekte und Einbettungselemente verwenden.

Es gibt keine Arbeit mehr zu tun. Wie Sie sehen, ist es einfach, ein YouTube- oder Vimeo-Video mit CSS ansprechbar zu machen. Ihr Video wird jetzt in allen Browsern auf PC, Laptop, Tablet und Handy perfekt angezeigt.