Responsives Iframe (YouTube, Google Maps und andere)

Responsives Iframe (YouTube, Google Maps und andere): wofür es gut ist

Der Einbettungscode von YouTube und Google Maps kommt mit fester Breite und Höhe und sprengt den Handybildschirm. Füge das Iframe oder nur die Adresse ein und erhalte die Version, die 100 % der Breite einnimmt und das Verhältnis mit aspect-ratio hält.

Das Tool erkennt YouTube (auch Shorts in 9:16), Google Maps, Vimeo, Spotify, Instagram, Canva und Google Forms, schlägt das richtige Verhältnis oder die richtige Höhe vor, fügt loading=lazy, einen title für Screenreader und Vollbild hinzu und zeigt die Vorschau, die du verengen kannst, um zu sehen, wie es am Handy aussieht.

So geht’s

1. Füge das Iframe oder die Adresse ein.
2. Prüfe Verhältnis und title.
3. Kopiere den Code in die Website.

Wann nutzen

• YouTube-Video auf der Startseite.
• Google-Karte auf der Kontaktseite.
• Spotify-Player oder eingebettetes Formular.

Häufige Fragen

Warum sprengt das Iframe das Handy?

Der Einbettungscode kommt mit festem width und height, wie 560 mal 315. Auf einem Handy mit 360 px Breite ist das Video größer als der Bildschirm. Der hier erzeugte Code nutzt eine Breite von 100 % und die Eigenschaft aspect-ratio, die das Verhältnis auf jedem Bildschirm hält.

Was macht loading=lazy?

Der Browser lädt das Iframe erst, wenn es kurz davor ist, auf dem Bildschirm zu erscheinen. Da Videos und Karten ziemlich schwer sind, lädt die Seite deutlich schneller, wenn sie weiter unten stehen.

Wozu dient der title im Iframe?

Screenreader sagen den title an, um zu sagen, was im Iframe ist, wie „Video: So kommst du zum Laden“. Ohne ihn hört die Person nur „Frame“ und weiß nicht, worum es geht.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools