YouTube-Video nicht in voller Höhe einbinden
bearbeitet von Rolf BHallo 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.
Und der Trick, wie man die Höhe eines Elements basierend auf seiner Breite einstellt (also einen festen Aspect-Ratio definiert), geht etwas anders.
~~~html
<div class="responsive-video">
<iframe...></iframe>
<div class="aspectSetter"></div>
</div>
~~~
{: .bad}
~~~css
.responsive-video {
width: 100%; /* zum Beispiel */
position:relative;
}
.responsive-video .aspectSetter {
padding-top: 80%;
}
.wrapper iframe { /* der war richtig */ }
~~~
{: .bad}
Mit :after im CSS geht das etwas geschickter - lass das aspectSetter DIV einfach weg und zaubere es per CSS hinein:
~~~html
<div class="responsive-video">
<iframe...></iframe>
</div>
~~~
{:.good}
~~~css
.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 */ }
~~~
{: .good}
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](https://jsfiddle.net/zdxhv2vx/1/)
_Rolf_
--
sumpsi - posui - clusi
YouTube-Video nicht in voller Höhe einbinden
bearbeitet von Rolf BHallo FreshFries,
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.
Der Trick, wie man die Höhe eines Elements basierend auf seiner Breite einstellt (also einen festen Aspect-Ratio definiert), geht allerdings etwas anders.
~~~html
<div class="responsive-video">
<iframe...></iframe>
<div class="aspectSetter"></div>
</div>
~~~
{: .bad}
~~~css
.responsive-video {
width: 100%; /* zum Beispiel */
position:absolute;
}
.responsive-video .aspectSetter {
padding-top: 80%;
}
.wrapper iframe { /* der war richtig */ }
~~~
{: .bad}
Mit :after im CSS geht das etwas geschickter - lass das aspectSetter DIV einfach weg und zaubere es per CSS hinein:
~~~html
<div class="responsive-video">
<iframe...></iframe>
</div>
~~~
{:.good}
~~~css
.responsive-video {
width: 100%; /* zum Beispiel */
position:absolute;
}
.responsive-video:after {
padding-top: 80%;
display: block; content: ''; /* diese beiden sind wichtig! */
}
.wrapper iframe { /* der war richtig */ }
~~~
{: .good}
So weit, so gut. Jetzt legst Du NOCHMAL einen Wrapper drumherum – eher einen Cutter :) – der das auf die gewünschte 16:9 Form schneidet.
[So zum Beispiel, mit div statt iframe im Inneren](https://jsfiddle.net/zdxhv2vx/1/)
_Rolf_
--
sumpsi - posui - clusi