Die korrekte Höhe des html5-Videoelements kann nach der Verwendung von webkit nicht gefunden werden. Transform scaleY

Question

Ich versuche, ein html5-Videoelement "responsive" zu machen. Seine fast 100% Breite, aber es brauchte nur ein wenig extra Breite und der Clip hatte auch ein bisschen zu viel Höhe. Also habe ich die folgenden:

css: 
    video { 
     width:100%; 
     height:auto; //seemingly does nothing 
    } 

js: 
$('video').css("-webkit-transform-origin","50% 0 0"); 
$('video').css("-webkit-transform","scaleY(0.75)"); 

das Problem mit dieser Lösung ist die folgende:

Also im Grunde gibt es nur eine riesige Lücke hier mit dem Videoelement sagen dass die Höhe 776px ist, aber wenn ich das tue:

jQuery('video').height() 

Das gibt die Höhe vor der Skala Y, etwa 1000px, zurück und egal was ich tue, um die Höhe des Videoelements z. innerHeight, outerHeight offsetHeight usw. Es wird immer die alte Höhe des Elements vor der SkalaY zurückgegeben. Also .. war meine Lösung das Video in einem Containerelement zu wickeln:

<div class="col-sm-12 video-container"> 
    <video autoplay loop> 
     <source src={{ video }} type="video/mp4"> 
    </video> 
</div> 

Und dann das äußere Element auswählen und die Höhe auf 767px, die tatsächlich funktioniert, Problem gerecht ist, dass, wenn ich es öffnen auf meinem Laptop-Bildschirm, dann die 767px ist aus, dann die Skala Y auf dem Video-Element machte es mehr wie 567px, so dass die Skalierung natürlich die Bildschirmhöhe in Betracht zieht, aber im Moment an diesem Punkt irgendwie verloren. Ich habe einige mögliche Lösungen:

• Ändern Sie den Clip, um ihn selbst zu einer bestimmten Höhe zu sein und mediaqueries verwenden, um es zu ändern, dass die Qualität des Video aswell verbessern würde (jetzt die Qualität ist zwar akzeptabel, und ich denke, ich würde viele Medien Abfragen benötigen, damit dies funktioniert.)
• Finden Sie heraus, wie man das Ergebnis der SkalaY (warum ist dies nicht zugänglich? es muss sein), wenn ich diese Höhe kann ich kann Setzen Sie das Containerelement einfach auf die gleiche Höhe und alles wird fixiert.
• Irgendwelche anderen Ideen? vielleicht smt wirklich schlau! :)

Danke!

Answer 1

Haben Sie versucht, mit:

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