Video iFrame in Responsive Design

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.