ウィンドウサイズが変更されたときにvideoJSインスタンスのスケールを作成する

Question

これはかなり基本的な質問ですが、私は数日間成功していませんでした。

私は、ユーザーが再生するローカルビデオを選択できる電子デスクトップアプリケーションを持っています。動画にdivを指定し、動画のサイズをそれに比例して（たとえばアスペクト比を維持して）、divのサイズに制限したいと考えています。ユーザーがウィンドウのサイズを変更した場合、たとえばアプリケーションをフルスクリーンにするなど、ビデオスケールを使用する必要があります。

これまでのところ、ビデオを中央に配置することができましたが、ウィンドウのサイズが変わると、ビデオは同じサイズのままです（下の画像）。

CSSクラス（vjs-16-9、vjs-4-3）をvideojsに追加しようとしましたが、data-setup='{"fluid": true}'を使用しようとしましたが、ビデオがウィンドウ全体を占めるようになりました。

私はビデオに、画面の何パーセントか（例えば40％）をビデオの幅に合わせて適切なアスペクト比を解決するように指定するにはどうすればいいですか？ 、再計算していますか？

---

.video-center { 
     margin-left: auto !important; 
     margin-right: auto !important; 
     height: 100%; 
    } 

---

<div class="videocontent"> 
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center" controls> 
    </video> 
    </div> 

ウィンドウモード：

フルスクリーンモード：

Answer 1

私はあなたの最終目標を理解している場合は、絶対にビデオを配置し、親を使用してビデオのアスペクト比を模倣するパディングを作成する必要があります。

.videocontent { 
 
    position: relative; 
 
    height: 0; 
 
    padding-top: 56.25%; /* divide the video height by the width to get this percentage */ 
 
} 
 
.videocontent video { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
}

<div class="videocontent"> 
 
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center" controls> 
 
    </video> 
 
</div>

Answer 2

Videojs

を交換し、私はVideojsを削除して、カスタムコードを生成するには、以下の手順を使用することをお勧めします。

は<video>要素幅と高さ属性を設定します。

<video width="991" height="557"></video> 

思想は、我々は明示的に<video>要素のwidthとheight属性を指定しました。これらの値は、正しいアスペクト比の初期決定にのみ使用されます。以下を参照してくださいJavascriptコード：あなたの心のコンテンツへの親コンテナの幅を設定し

.videocontent { 
    width: 80%; 
    /* for horizontal centering (optional) */ 
    margin-right: auto; 
    margin-left: auto; 
} 

あなたのページにjQueryのを含めます。

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 

カスタムのJavascript動的アスペクト比を処理します。

// Find all <video> element 
var $allVideos = $('video'), 

    // The element that is fluid width 
    $fluidEl = $('.videocontent'); 

// Figure out and save the aspect ratio for each <video> element on the page 
$allVideos.each(function() { 

    $(this) 
    // values from <video> height and width attributes 
    .data('aspectRatio', this.height/this.width) 

    // and remove the hard coded width/height 
    .removeAttr('height') 
    .removeAttr('width'); 

}); 

// When the window is resized 
$(window).resize(function() { 

    var newWidth = $fluidEl.width(); 

    // Resize all <video> according to their own aspect ratio 
    $allVideos.each(function() { 

    var $el = $(this); 
    $el 
     .width(newWidth) 
     .height(newWidth * $el.data('aspectRatio')); 

    }); 

// Kick off one resize to fix all videos on page load 
}).resize(); 

クレジットFluid Width YouTube Videos