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:

Weiterlesen