Tutorial: So wird ein iFrame responsive!

So können Sie ein iFrame responsive gestalten!

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



Mit unseren themenrelevanten und starken Backlinks können Sie das Ranking Ihrer Website verbessern und mehr Besucher erhalten!

» Aktuelle Infos zum Thema Backlinks kaufen!

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:



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:



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

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:



Das zugehörige Stylesheet sieht wie folgt aus:



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

19.06.2017
SEO Tool: Wise SEO Suite
16.04.2017
Responsive Formulare
05.04.2017
Wichtige SEO Maßnahmen
29.12.2016
SEO im Jahr 2017
11.10.2016
Privates Blog Netzwerk aufbauen
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!
20.09.2015
W-Fragen-Tool: Texte erstellen!
18.09.2015
Expired Domains finden & kaufen

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