Über den Author / Internet / Video iFrame in Responsive Design

Video iFrame in Responsive Design

~1 Min. Lesezeit

Fremde Videos müssen je nach Rechten unverändert in der eigenen Seite eingebaut werden. iFrame Lösungen sind leider nicht responsive und daher eigenen diese sich sehr schlecht. Hier ein kleiner CSS Hack, damit ein iFrame auch Responsive ist und das Seitenverhältnis beim Grösse ändern bestehen bleibt.

Als Beispiel hierzu dient ein Videobeitrag vom Schweizer Fernsehen, welche den folgenden Embed Code offiziell anbieten:

<iframe src="https://tp.srgssr.ch/p/srf/embed?urn=urn:srf:ais:video:420e3a5f-fb72-4787-8846-e2d28d7aa829&start=596" width="624" height="351" frameborder="0" name="ECO – Das Wirtschaftsmagazin"></iframe>

Wie man gut erkennen kann, ist in diesem Code die Grösse des Videos fest angegeben. Gebt man nun als Breite 100% an Zoomt das Video zwar auf die Breite, aber die Höhe passt sich nicht automatisch an. Dies ist ein Problem, was man sehr einfach mit einem CSS Trick lösen kann:

Dazu packt man das iFrame in ein Div Container und verpasst ihm folgenden CSS Code:

<style>.responsiv-embed-container {
  position: relative; 
  padding-bottom: 56.25%;
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.responsiv-embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
</style><div class="responsiv-embed-container">
<iframe src="https://tp.srgssr.ch/p/srf/embed?urn=urn:srf:ais:video:420e3a5f-fb72-4787-8846-e2d28d7aa829&start=596" width="624" height="351" frameborder="0" name="ECO – Das Wirtschaftsmagazin"></iframe>
</div>

Je nach Videoformat muss nur noch das Seitenverhältnis per padding-bottom angepasst werden:

  • 56.25% für 19:6 Videoformat
  • 75% für 4:3 Videoformat

Anschliessend ist das Video schön Reponsiv eingebunden auf 100% Breite und jederzeit die korrekte Höhe.

About Stefan

avatar
Ein männlicher IT Nerd, durchstöbert das Web nach speziellen Gadgets, unentbehrlicher Software und Alles was man im IT Sektor nicht verpassen darf.Immer hilfsbereit wenn Probleme zu lösen sind oder das Unmögliche umgesetzt werden sollte.

Weitere interessante Artikel

PHP Trojaner (Teil 2: Uploader Infektion)

~1 Min. LesezeitPHP Trojaner sind beliebt, denn oft werden solche Infektionen übersehen und überstehen Jahre …

PHP Trojaner (Teil 1: footer.php Infektion)

~1 Min. LesezeitWieder einmal hat das anynome Web zugeschlagen und eine Installation von diversen WordPress …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg