WebkitトランスフォームscaleYを使用した後、正しいhtml5ビデオ要素の高さを取得できません

Question

私はhtml5ビデオ要素を「反応的」にしようとしています。その全幅は100％ですが、ちょうど余分な幅が必要となり、クリップの高さもやや高すぎます。だから私はやった次

だから、基本的には大きなギャップがビデオ要素が言ってここにあります：

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)"); 

この解決策の問題点は以下のとおりです。高さは776ピクセルですが、私が行う場合：

jQuery('video').height() 

これは、scaleYの前の高さを返します。約1000ピクセルで、ビデオ要素の高さを取得するために何をしますか。 innerHeight、outerHeight offsetHeightなど。それは常にscaleYの前に要素の古い高さを返します。 、

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

し、その外側の要素を選択し、実際に動作され、767pxに高さを設定する問題はちょうど私が私の上でそれを開いたときにすることを、次のとおりです..だから私の解決策は、コンテナ要素でビデオを包むようにしました767pxがオフの場合、ビデオ要素のscaleYによって567pxのようになります。したがって、スケーリングは画面の高さを考慮に入れていますが、現時点では失われています。 、 ビデオaswellの品質を改善するクリップそれ自身の特定の高さになると、それを変更する mediaqueriesを使用するためには、（今の品質がが可能です

• 変更：私はいくつかの可能な解決策を持っています私はこれがうまくいくためには多くのメディアクライテリアが必要だと思います。）
• scaleYの結果を取得する方法を解説します（これはアクセスできないのですか？コンテナ要素を同じ高さに設定して、すべてを修正します。
• 他のアイデア？多分smt本当にスマート！ :)

ありがとう！

Answer 1

あなたが使用してみました：

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