iframe responsive Generator online

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.

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

Beispiel: Responsive iframe mit aspect-ratio

HTML
CSS

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

Ich hoffe ich konnte dir mit der kleinen Anleitung und meinem Generator zeigen wie einfach es doch ist ein iframe responsive für alle Bildschirmbreiten zu machen. Hier findest du weitere hilfreiche Tools.

Browser Support

Desktop

Chromeab 88 - 89
Operaab 74
Firefoxab 89 - 90
Safari-
Internet Explorer-
Edgeab 88 - 89

Mobile / Tablet

Ios Safari-
Opera Mobile-
Opera Miniall
Androidab 90
Android Chromeab 90
Android Firefox-

iframe für ältere Browser responsive machen

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

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.

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.

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.