CSS Twitter Bootstrap: Video-Höhe stimmt auf iPad nicht

[thruem]

Hi,

ich habe auf einer HTML 5 Seite ein Video eingebunden. Verwende das Bootstrap Framework von Twitter, damit die Seite responsive ist und sich den verschiedenen Screens anpasst.

Funktioniert wunderbar auf dem Desktop-Chrome und auf dem iPhone. D. h. wenn man die Größe des Browser-Fensters ändert, passt sich die Größe des Videos schön an.

Nur auf dem iPad ist das Video so Breit wie die Box (100%), aber die Höhe passt sich nicht an. Ihr seid meine letzte Hoffnung :-( Versteht das jemand?

HTML:

...
<div class="row-fluid">
      <div class="span7">
               <video controls = "controls" poster = "pic.jpg" onclick="this.play();">
                    <source  src="video.mp4" type="video/mp4"/>
               </video>
      </div>
</div>
...

CSS:

video {
    width: 100% ;
    height: auto;
}

 

[tiwa86]

Vielleicht braucht der Safari im iPad eine feste Höhenangabe. Du kannst ja dazu eine spezifische CSS-Eigenschaft (Höhe = ....px) dem iPad geben:

@media only screen and (device-width: 768px) { /* For general iPad layouts */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { /* For portrait layouts only */ } 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ }

 

[thruem]

@Waldiman: Ja, so könnte man es grundsätzlich lösen. Ich will durch Bootstrap allerdings nicht pro Gerät individuelle fixe Maße angeben.

Mit Bootstrap soll nur definiert werden, wieviele Spalten des Responsive-Grids die Div-Box breit ist, ein Video oder ein Bild soll sich dann automatisch anpassen.

Das funktioniert übrigens sehr gut mit einem Bild, nur die Reaktion bei Videos ist mir bis jetzt wirklich ein Rätsel.

 

[ice-breaker]

Gib dem Video-Element doch mal eine Breite und Höhe, so wie man es mit den Bildern auch macht. Sonst muss erst das Video geladen werden, bevor der Browser dessen Größe kennt, eventuell ist genau das, das Problem beim iPad.

 

[thruem]

Gib dem Video-Element doch mal eine Breite und Höhe

Habe ich gerade getestet. Das Ergebnis ist leider unverändert :-(