Diese kurze Anleitung zeigt, wie man ein Iframe, z. B. ein YouTube Video oder einen Virtuellen 360 Grad Rundgang von Google per CSS in das Responsive Layout einer Webseite einbindet. Ihr benötigt dazu nur etwas HTML Markup, euer Iframe und einige CSS Befehle. Auf JavaScript kann komplett verzichtet werden.
Ein gutes Responsive Design ermöglicht nicht nur für eure User die einfache Bedienbarkeit eurer Webseite. Webseiten mit Responsive Layouts ohne Fehler werden auch von der Google Suche seit April 2015 auf Mobilgeräten bevorzugt (Stichwort Mobile Ranking). Oft können eingebettete Frames wie beispielsweise eingebundene YouTube Videos euer Design sprengen. Wie ihr das verhindert und neben Usability auch die mobile SEO eurer Webseite fördert lest ihr hier. Doch bevor es mit der Schritt für Schritt Anleitung los geht eine kleine Kostprobe, wie das Responsive Iframe hinterher aussieht.
YouTube Video einbinden per Responsive Iframe nur mit CSS
Und so Sieht dann ein YouTube Video im full-responsive Layout aus. Das sich anpassende Verhalten des Div Elementes seht ihr am besten, wenn ihr das Browserfenster verkleinert oder die Seite auf einem Handy anschaut (einfach QR-Code scannen).
Anleitung: Iframe Responsive machen mit CSS
Erstellt als erstes euer HTML Markup mit diesen Div-Containern und den folgenden Klassen:
<div class=“center“>
<div class=“iframe-container“>
<iframe>Markup für mein YouTube Video oder sonstiges Iframe</iframe>
</div>
</div>
Weiterhin werden die folgenden CSS Klassen in euer Stylesheet geschrieben:
.center {
text-align: center;
}
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
text-align: left;
display: inline-block;
}
.iframe-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
Achtung! Hochkommas müssen im Editor angepasst werden.
Responsive Iframe für Google Business View (virtueller Rundgang)
Google Business View im Responsive Iframe, nur mit CSS ohne Hilfe von JavaScript.
Diese Seite auf Mobilgeräten aufrufen: Einfach den QR-Code für die Seitenansicht auf dem Smartphone oder Tablet abscannen.
Du fragst dich was das ist? Ein QR-Code. Was man damit macht liest du in diesem Beitrag.
Erklärung zu den CSS Klassen für euer Stylesheet
Das Div-Element mit der .center Klasse wird zuerst gesetzt. Es zentriert die später darin enthaltenen Container (.iframe-container) für euer Iframe. Diese Klasse benötigt ihr nur für den Fall, dass ihr ein Video oder Iframe nicht mit 100 % Breite darstellen wollt. Habt ihr ein Full-Responsive Layout über 100 % Bildschirmbreite, wird es schwierig eine Seite auf dem Smartphone oder Tablet zu scrollen, ohne dabei auf das eingebundene Frame zu „klicken“. Deshalb bietet es sich an, ein Video im Iframe nur mit 90 % Breite darzustellen. Dadurch bleibt dem User genug Platz zum Scrollen, wenn ein Touch Display ohne das sonst zum Scrollen genutzte Mausrad eingesetzt wird.
Die zweite CSS Klasse .iframe-container wird in den .center Container gesetzt und umschließt euer Frame. Der Padding-Bottom Wert von 56.25 % ergibt sich aus den 16:9 Standard Video Format von YouTube.
CSS Prozentwerte für verschiedene Formate
- [16:9] 9 / 16 * 100 = 56.25%
- [16:10] 10 / 16 * 100 = 62.5%
- [4:3] 3 / 4 * 100 = 75%
Als letzte CSS Klasse wird das Iframe selbst angesprochen. Das HTML-Element des Frame wird innerhalb des .iframe-container absolut positioniert. Die Angaben width und height sorgen dafür, dass das Iframe immer mit 100% Breite dargestellt wird. Mit !important werden abweichende Angaben aus dem HTML Markup des Frames überschrieben.
