So können Sie ein iFrame responsive gestalten

Tutorial: So wird ein iFrame responsive!

So können Sie ein iFrame responsive gestalten!

Erstellt am Sonntag, 23. Oktober 2016 18:41 Uhr

Ein iFrame kann auch responsive gestaltet werden!

Ein iFrame kann mit dem hier vorgestellten Tutorial responsive in eine Website integriert werden. Die Breite (width) und die Höhe (height) des iFrame Contents wird automatisch an die jeweilige Endgeräte-Auflösung angepasst.

Insbesondere dynamische Inhalte (z.B. responsive Formulare, Gästebücher usw.) können somit von Smartphones und Tablets gut lesbar ohne Scrollbalken dargestellt werden.

Tutorial - Schritt für Schritt zum Responsive iFrame!

1. Fügen Sie diesen Javascript Code zwischen <head> und </head> ein:

<script type="text/javascript"> function iframeLoaded() { var iFrameID = document.getElementById('idIframe'); if(iFrameID) { iFrameID.height = ""; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; } } </script>

Wichtig: Der Javascript Code für das iFrame funktioniert nur, wenn sich die entsprechende Seite auf der selben Domain befindet. Wenn Sie eine Seite von einer fremden Domain einbinden möchten, muss das (nachfolgende) div-Element die Klasse "embed-container" (siehe unten! [Beispiel YouTube Video]) besitzen.

2. Fügen Sie diesen iFrame Code in ein div-Element (<div> </div>) ein:

<div> <iframe src="http://www.ihredomain.de/text.html" id="idIframe" onload="iframeLoaded()" style="border: none; width:100%; margin: 0 0 0 1%;" allowfullscreen scrolling="no"> </iframe> </div>

Achten Sie auf die korrekte URL. (insbesondere auf http/https!)

Beschreibung: Das iFrame muss in ein div-Element eingebettet werden. Um das iFrame responsive zu gestalten, muss es diese Parameter besitzen:

id="idIframe"
onload="iframeLoaded()"
allowfullscreen
scrolling="no"

3. Fertig!

Das könnte Sie auch interessieren!

Ein Formular responsive gestalten!

Besonderheit: YouTube Videos

Eine Besonderheit gibt es beim Einbinden eines YouTube Videos, da YouTube das Ausführen des Javascript Codes unterbindet. Die Höhe und Breite wird somit nicht mehr automatisch angepasst. Um dieses Problem zu lösen, muss das div-Element die Klasse "embed-container" erhalten:

<div class="embed-container"> <iframe src="http://www.youtube.com/link" id="idIframe" onload="iframeLoaded()" style="border: none; width:100%; margin: 0 0 0 1%;" allowfullscreen scrolling="no"> </iframe> </div>

Das zugehörige Stylesheet sieht wie folgt aus:

<style type="text/css"> .embed-container { position: relative; padding-bottom: 56.25%; /* ratio 16x9 */ height: 0; overflow: hidden; width: 100%; height: auto; } .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ratio 4x3 */ .embed-container.ratio4x3 { padding-bottom: 75%; } </style>

Die Klasse ".embed-container" sorgt durch "padding-bottom: 56.25%;" dafür, dass ein Video im Format 16x9 dargestellt wird. Wenn Sie ein Video im Format 4x3 darstellen möchten, müssen Sie den Wert in "padding-bottom: 75%;" ändern.

Demo: Gästebuch via Responsive iFrame einbinden!

Mein Gästebuch Script YellaBook wird nachfolgend mit einem iFrame responsive (mobil-optimiert) dargestellt. Um sich von der automatischen Höhen-Anpassung zu überzeugen, klicken Sie einfach auf den Eintragen-Link.

Knothe Media News

12.04.2023: Referenzen aktualisiert
01.03.2023: Erste Buchveröffentlichung
21.02.2023: Referenzen aktualisiert
01.12.2022: Referenzen aktualisiert
27.10.2022: Referenzen aktualisiert
15.06.2022: Responsive Formulare
13.05.2021: Privates Blog Netzwerk aufbauen
12.09.2020: Referenzen aktualisiert
20.05.2020: Referenzen aktualisiert
16.07.2019: Referenzen aktualisiert
16.01.2018: SEO Stammtisch Bremen
07.01.2018: SEO im Jahr 2018
04.08.2017: Gastartikel veröffentlichen
19.06.2017: SEO Tool: Wise SEO Suite
05.04.2017: Wichtige SEO Maßnahmen
06.10.2016: Mobile Webseite erstellen
23.08.2016: Presse aktualisiert
14.07.2016: Wird SEO überbewertet?
15.03.2016: Referenzen aktualisiert
24.10.2015: Knothe Media goes mobile!

Google Updates

23.09.2016: Penguin Update 4.0 (Real-time)
12.05.2016: Mobile-friendly 2 Update
08.01.2016: Google Core Update
26.10.2015: RankBrain Update 1.0
17.07.2015: Panda Update 4.2
13.05.2015: Google Phantom Update
17.10.2014: Penguin Update 3.0
25.09.2014: Panda Update 4.1
20.05.2014: Panda Update 4.0

Knothe Media

Tutorial: So wird ein iFrame responsive!