iframe responsive Generator online

Oliver Götze

Verfasst am 18.05.2021

Update 24.06.2025

In einigen Projekten ist es erforderlich, dass man ein Video via iframe einbettet und dieses muss natürlich, unabhängig von der Bildschirmbreite, immer im richtigen Seitenverhältnis angezeigt werden. Jetzt gibt es mehrere Möglichkeiten wie man ein Video oder iframe responsive machen kann. Die einfachste Variante ist ein online responsive iframe Generator zu nutzen.

Responsive iframe Generator online

URL

Aspect Ratio (Seitenverhältnis)

HTML

In die Zwischenablage kopieren

CSS

In die Zwischenablage kopieren

Vorschau

Und so funktioniert der responsive iframe Generator

Gib eine URL ein und wähle ein Seitenverhältnis. Nachdem du beides ausgewählt hast ändern sich automatisch die Seitenverhältnisse des Demo iframe. Du kannst natürlich ein iframe auch ohne Generator responsive machen.

So erstellst du ein responsive iframe im Verhältnis 16:9

Früher musste man umständlich mehrere divs erstellen, und mehrere Zeilen CSS Code schreiben. Doch dies fällt dank aspect-ratio komplett weg. Du kannst mit aspect-ratio alle Seitenverhältnisse angeben, die du möchtest.

So funktioniert aspect-ratio

Mit aspect-ratio kannst du die Breite und Höhe im Verhältnis angeben.

css

				aspect-ratio: {Höhe} / {Breite};

HTML
CSS

HTML

									<iframe class="iframe" src="https://www.youtube.com/embed/DjhKlwPWlJ4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS

									iframe.iframe {
	margin: 24px 10%;
	width: 80%;
	aspect-ratio:16 / 9;
}

Leider unterstützen noch nicht alle Browser aspect-ratio. Jetzt muss man abwägen, ob man nur auf neue Browser setzte oder versucht alle zu bedienen. Wenn man für letzteres ist, dann muss man einige paar Zeilen mehr schreiben.

HTML
CSS

HTML

									<div class="iframeWrapper">
	<iframe src="https://www.youtube.com/embed/DjhKlwPWlJ4" title="YouTube video player" frameborder="0"></iframe>
</div>

CSS

									div.iframeWrapper {
	position: relative;
	width: 80%;
	margin: 24px 10%;
}
div.iframeWrapper::after {
	content: '';
	display: block;
	padding-top: 56.25%; // 16:9
}
div.iframeWrapper iframe {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

Zunächst muss ein div erstellt werden, welches die finale Breite hat. Diesem div können wir die Pseudo-Klasse ::after anfügen und mit padding-top können wir die Höhe erstellen. Eine kleine Liste der Seitenverhältnisse.

css

				padding-top: 56.25%; /* ratio 16x9 */

padding-top: 75%; /* ratio 4x3 */

padding-top: 66.66%;  /* ratio 3x2 */

padding-top: 62.5%;/* ratio 8x5 */

padding-top: 100%;/* ratio 1x1 */

Wie du siehst benötigt es ein bisschen mehr CSS Code, um ein iframe auch für ältere Browser responsive zu machen. Am Ende musst du entscheiden, welcher Weg für dich der Beste ist.

1 Like

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu iframe responsive Generator online

Wenn dir der Beitrag iframe responsive Generator online gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.