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.

About Stefan

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

WordPress Domain Suchen und ersetzen

Es gibt diverse Plugins für WordPress, welche die Datenbank durchsuchen und Domain Vorkommnisse ersetzen. Doch was, wenn das WordPress bereits nicht mehr aufrufbar ist, da eine Umstellung schief ging? Dazu sind Plugins nicht brauchbar. Aus diesem Grund stelle ich meine Domains, mit einem kleinen PHP Skript um, was ich hier vorstelle. Das Skript durchsucht nicht die komplette Datenbank, was viel zu aufwändig ist, sondern Sucht …

Anti-Adblocker blockieren

Das Internet ist voll mit Werbung, dazu installiert man ein Adblocker. Viele Seiten gehen mit …

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.