VideoJs幅の高さの問題

Question

ビデオで作業し、ウェブサイトでレンダリングしようとしています。

法的理由でビデオを投稿することはできませんが、実際のビデオの幅と高さについてはいくつか質問があります。

ビデオの元の高さと幅は960 x 540で、ビデオは全幅で（外側に黒いバーはありません）1/3以下の高さでウェブサイトのレンダリングに必要です。

高さを縮小すると、ビデオが一定の縮尺で維持されるように、幅が比例して移動する必要があることを説明し続けます。

彼らは私にこのような例を示しました： http://pillar.mediumra.re/home-landing-service-3.htmlヘッダーのビデオはinital値から切り取られ、オブジェクトフィット、IE11などでは動作しません。

私はこの作業を行うために私が行うことができますか、CSSで変更できますか？

私はVLCでビデオをリスケールしてみましたが、それを使用していますが、すべてpixelyします。ビデオjsクラスvjs-16-9を実行すると、前のビデオと同じ高さになります。

また、ビデオは18メガバイトのビデオですが、私はvimeo vjsプラグインを使用して帯域幅を抑えようとしましたが、ビデオにカーソルを合わせるとvimeoのコントロールバーが表示されます。

私も特定のCSSクラスで再生しようとしましたが、正しくスケールダウンされません（黒いバーがあります）。

/* Video Code Changes */ 
.video-js.vjs-fill{ 
/* max-height:250px !important; */ 
} 
.video-js .vjs-tech{ 
/* max-height:75% !important; */ 
} 
/* end Video Code changes */ 

参考のために以下のコード（任意のアイデア）：

<video id="my-video" class="video-js vjs-default-skin vjs-16-9" preload="auto" poster="MY_VIDEO_POSTER.jpg" data-setup='{"controls": false, "autoplay": true, "preload": "auto", "muted": true, "loop": true}'> 

          <source src="content/video/video_hi.mp4" type='video/mp4' > 


         <p class="vjs-no-js"> 
          To view this video please enable JavaScript, and consider upgrading to a web browser that 
          <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> 
         </p> 
        </video> 

Answer 1

彼らは私が説明したことを理解し、彼らが望む考えは達成できません。

Answer 2

一つの解決策は、のは.video-wrapperそれを呼び出し、その中videoタグをつけてみましょう、ラッパー要素を作成することです。

<div class="video-wrapper"> 
    <video src="..." autoplay></video> 
</div> 

その後、ラッパー要素に好適な高さ、中央（background-position: centerに似て）その子を与え、オーバーフローを非表示にすることができます。 video要素は、親の幅を塗りつぶすだけで済むので、完了する必要があります。

.video-wrapper { 
    height: 500px; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
} 

.video-wrapper > video { 
    width: 100%; 
} 

あなたは結果がどのように見えるかを確認するために私のCodePenを見てみることができます。