So können Sie ein iFrame responsive gestalten

Tutorial: So wird ein iFrame responsive!

So können Sie ein iFrame responsive gestalten!

Erstellt am Donnerstag, 29. Mai 2025 15:27 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.