Responsive iFrame

Created
Sonntag, 30. April 2023
Created by
Stefan J. Trucker

Mittlerweile gibt es keine Seite mehr, die nicht responsive ist, sprich sich an das Display des Endgerätes anpasst um ein optimales Benutzererlebnis zu gewährleisten, nur leider verwenden noch viele Portale wie Youtube und Vimeo iFrames um ihre Inhalte auf anderen Seiten einzubetten. Mit einem kleinen Css Trick lässt sich der Inhalt aber gewünscht anpassen.

 

Die Anleitung wird anhand eines YouTube Videos durchgeführt, denn ich denke, dass dieser Inhalt sehr häufig genutzt wird.

Diesen Code mit dem Youtubevideolink als HTML-Sourcode  in euren Artikel eintragen, dazu entweder den Button Sourcode anzeigen, oder den Editor ausschalten.

<div class="responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/....." frameborder="0" allowfullscreen></iframe>
</div>

 

Im Custom.css eures Templates diesen Code einfügen CSS:

.responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

 

Fertig, nun werden eure Inhalte mit der angegebenen Größe angezeigt, außer der Bildschirm ist zu klein, dann wird der Inhalt auf die Breite des Bildschirmes skaliert.

 

 

 

{footer}

3D Jake