YouTube-Video nicht in voller Höhe einbinden

[Rolf B]

Hallo FreshFries,

Youtube ist unschuldig. Computer tun nie, was sie sollen, sondern das, was Du ihnen sagst.

Nimm mal width und height aus dem iframe-Element weg, mach das nur mit CSS.

Das Breite/Höhe Verhältnis des Videos ist 5:4, wie mir scheint. Ihr liegt mit eurem Padding-Trick also gar nicht falsch, ihr müsst nur 80% einstellen. Das ist natürlich ärgerlich, wenn ihr andere Videos einbettet, die einen anderen Aspekt haben. Da sehe ich aber wenig Chancen; Youtube passt das Video so in den iframe ein dass es unter Beibehaltung des Aspect möglichst groß wird. In der anderen Richtung zentrieren sie das Video. Wenn ihr einen Youtube-Parameter habt, mit dem ihr ein "top-align" im iframe bekommt, könnt ihr euch das Leben eventuell einfacher machen.

Wie auch immer; der Trick, wie man die Höhe eines Elements basierend auf seiner Breite einstellt (also einen festen Aspect-Ratio definiert), geht jedenfalls etwas anders:

<div class="responsive-video">
   <iframe...></iframe>
   <div class="aspectSetter"></div>
</div>

.responsive-video {
   width: 100%; /* zum Beispiel */
   position:relative;
}
.responsive-video .aspectSetter {
   padding-top: 80%;
}
.wrapper iframe { /* der war richtig */ }

Mit :after im CSS geht das etwas geschickter - lass das aspectSetter DIV einfach weg und zaubere es per CSS hinein:

<div class="responsive-video">
   <iframe...></iframe>
</div>

.responsive-video {
   width: 100%; /* zum Beispiel */
   position:relative;
}
.responsive-video:after {
   padding-top: 80%;
   display: block;  content: '';  /* diese beiden sind wichtig! */
}
.wrapper iframe { /* der war richtig */ }

So weit, so gut. Jetzt legst Du NOCHMAL einen Wrapper drumherum – eher einen Cutter :) – der das auf die gewünschte 16:9 Form schneidet. Den bisherigen Wrapper musst Du dann natürlich auf position:absolute ändern.

So zum Beispiel, mit div statt iframe im Inneren

Rolf