Karte: Iframes mit CSS gestalten

Responsive Iframes

Iframes, die sich wie ein guter Anzug anpassen

Iframes sind großartig, keine Frage, sie sind die Fenster, die Einblicke in fremde Welten geben. Aber manchmal sind sie wie ein steifer, unflexibler Anzug, der einfach nicht sitzen will, egal wie oft man daran zupft und kratzt.

Und hier kommt CSS ins Spiel, wie ein geschickter Schneider. Es sorgt dafür, dass dein Iframe sich an jede Bildschirmgröße anpasst, als wäre es maßgeschneidert. Mit ein paar cleveren Tricks kannst du dafür sorgen, dass dein Iframe sich elegant ausbreitet, ohne jemals aus der Form zu geraten. So bleibt dein kleines Fenster in andere Welten immer stilvoll, ganz egal ob es auf dem großen Desktop oder dem winzigen Mobilgerät angezeigt wird.

Los geht’s

Iframes responsiv gestalten

Token: Iframes gestalten

Ein Fenster

das sich anpasst

Um ein Iframe responsiv zu gestalten, kannst du es in einen Container mit einer festen Seitenverhältnis-Berechnung einfügen.

In diesem Beispiel sorgt der iframe-container dafür, dass das Iframe sich an das Seitenverhältnis 16:9 anpasst (typisch für Videos). Das Verhältnis wird durch das padding-bottom festgelegt (56.25% entspricht 16:9). Das Iframe wird dann in der Größe angepasst, um die gesamte Breite des Containers auszufüllen, unabhängig von der Bildschirmgröße. Mach dir noch keine Gedanken über die Eigenschaft position. Die wirst du noch zur Genüge bei den Weirdos kennenlernen!

HTML
<div class="iframe-container">
    <iframe src="https://www.example.com" frameborder="0" allowfullscreen>
    </iframe>
</div>
CSS
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* Für ein 16:9-Seitenverhältnis */
    height: 0;
    overflow: hidden;
}

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

In dieser Lektion hast du gelernt…

  • Warum Iframes von Natur aus nicht responsiv sind und wie du sie mit CSS flexibel an jede Bildschirmgröße anpassen kannst.
  • Wie du ein Iframe in einem Container mit fester Seitenverhältnis-Berechnung einbettest, um eine optimale Darstellung zu gewährleisten.
  • Warum padding-bottom: 56.25% für ein 16:9-Format sorgt und wie sich dieser Wert für andere Seitenverhältnisse anpassen lässt.
  • Warum width: 100% und height: 100% essenziell sind, um sicherzustellen, dass sich das Iframe voll ausdehnt, egal auf welchem Gerät.

Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

Das magische Portal

Hoch oben im Turm der alten Magier schwebt ein Fenster – nicht aus Glas, sondern aus purer Magie. Es zeigt ferne Welten und flüsternde Landschaften. Deine Aufgabe ist es, dieses Portal mithilfe eines I-Frames zu meistern. Sorge dafür, dass es auf jedem Gerät flexibel bleibt, indem du es responsiv gestaltest, und belebe es mit einem YouTube-Video. Aber Achtung: Ein gut geformtes Portal ist der Unterschied zwischen beeindruckendem Zauber und einem chaotischen Blick in die Besenkammer!

Deine Aufgabe: Die Einbindung und Gestaltung von I-Frames

  • I-Frame einbinden:
    Verwende das <iframe>-Element, um ein YouTube-Video einzubinden.
    Nutze https://www.youtube-nocookie.com für eine datenschutzfreundliche Einbindung.
  • Responsive Gestaltung:
    Füge eine CSS-Regel hinzu, um das I-Frame responsiv zu gestalten.
  • Tipp: Du musst Klassen und einen umschließenden Container erstellen, dass es funktioniert.

Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!

Editor in neuem Tab öffnen
HTML
<!-- Youtube ohne CSS -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/o1JIK5W3DRU?si=gLp-so-mNBvlGgYs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<!-- Youtube mit CSS -->
<div class="iframe-container">
    <iframe frameborder="0" allowfullscreen src="https://www.youtube-nocookie.com/embed/WhWc3b3KhnY?si=WjzAbnmVkseYr38-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
CSS
.iframe-container {
    position: relative;
    width: 90%;
    padding-bottom: 56.25%;
    /* Für ein 16:9-Seitenverhältnis */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
Weiter geht’s
Nach oben scrollen