Der Code:
Die Lösung:
Den “Embed” Code umgibt man mit einem zusätzlichen DIV Container. Wie z.B.:
<div class="responsive-video"> <iframe src="http://player.vimeo.com/video/47387431?title=0& ;byline=0&portrait=0&autoplay=0" width="1600" height="900" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div>
Über diesen kann man zunächst den iFrame ansteuern und in der Grösse anpassen:
.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Und dann in einem zweiten Schritt den Abstand des iFrames nach unten in das relative Verhältnis der Videogröße setzen:
.responsive-video { position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; }