HTML5ビデオのフィット幅または高さ

Question

width=100% height="auto"は、ブラウザウィンドウの幅全体に合わせてビデオサイズを調整しますが、ウィンドウの高さがアスペクト比よりも低い場合、ビデオの高さが低くなります。

ビデオの幅や高さに合わせて縮尺を調整し、クロップなしでビデオ全体を見ることができるようにします。最も近い比率（ウィンドウ比率が低い場合は余白を追加します）。

しかし、私はこれを行う方法を理解することはできません。
最初に高さの値％またはpxは無視されるようですが、高さを使用してサイズを設定することはできません。最小幅/高さでも同じです。

どうすればいいですか？

マイコード：

<video id="video" width=100% height="auto" onclick=playPause()></video> 

ビデオがvは、アレイからのビデオリンクではJavaScriptによってロードされます。

video.addEventListener('play', function() { v.play();}, false); 

Answer 1

はjavascript関数でそれを自分で解決：

window.addEventListener('resize', resize, false); 

video.height = 100; /* to get an initial width to work with*/ 
resize(); 

function resize() { 
videoRatio = video.height/video.width; 
windowRatio = window.innerHeight/window.innerWidth; /* browser size */ 

    if (windowRatio < videoRatio) { 
     if (window.innerHeight > 50) { /* smallest video height */ 
       video.height = window.innerHeight; 
     } else { 
      video.height = 50; 
    } 
    } else { 
     video.width = window.innerWidth; 
    } 

}; 

Answer 2

は内部の値をラップ試してみてください、あなたは

<div class="videoContainer"> 
    <video id="video" width="100%" height="auto" onclick="playPause();"></video> 
</div> 

を引用これらのクラスを追加できます

.videoContainer 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: hidden; 
} 

.videoContainer video 
{ 
    min-width: 100%; 
    min-height: 100%; 
} 

または代わりに画像/動画と同類で使用することができますintrinsic ratiosと呼ばれる偉大な自動幅/高さのトリックがあります。この

video { 
    object-fit: cover; 
} 

Answer 3

を使用！そのトリックは、パーセンテージ値の埋め込みが適用されているラッパーに、目的の要素を配置することです。

あなたのマークアップは次のようになります。

<div class="video-wrapper"> 
    <video class="video" id="video" onclick=playPause()></video> 
</div> 

そして、あなたのCSS：

.video-wrapper { 
    position: relative; 
    padding-bottom: 20%; 
    height: 0; 
} 

.video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #ccc; /* Random BG colour for unloaded video elements */ 
} 

あなたは.video-wrapperスタイルのmin-widthまたはmax-widthで遊んで、あなたのビデオコンテナの大きさを制限することができます。

希望すると便利です。

Answer 4

を、私は同様の問題がありました。私は様々なオブジェクトをスライドとして作成しました。その中には、さまざまなサイズのビデオがあります。私は概念的な解決策を見いださなかったので、私はトリックを見つけました。

私は明示的にタグ内のすべての実際の映像のサイズを指定し、それらのすべての情報を収集しています

var vids = document.getElementsByClassName("vid"); // videos 
var vidl = vids.length; 
var vidH = [ ]; 
var vidW = [ ]; 

// Get original widths and heights of videos 
for (i=0; i<vidl; i++) { // > 
    vidH.push(vids[i].height); 
    vidW.push(vids[i].width); 
} 

そして、（必要なとき）、次のように私は、ウィンドウのサイズを定義します。

// Current inner height of the browser window (in pixels) 

var iH = window.innerHeight 
     || document.documentElement.clientHeight 
     || document.body.clientHeight; 
// Current inner width of the browser window (in pixels) 
var iW = window.innerWidth 
     || document.documentElement.clientWidth 
     || document.body.clientWidth; 

矩形を別の矩形に再スケールするには、最小の尺度を見つける必要があります。

var r, rh, rw; 

// Scale videos to fit window 
for (i=0; i<vidl; i++) { // > 
    rh=iH/vidH[i]; rw=iW/vidW[i]; r=Math.min(rh, rw); 
    if (rh>rw) { 
     vids[i].height=Math.floor(vidH[i]*r); 
     vids[i].width=iW; 
    } 
    else { 
     vids[i].height=iH-5; 
     vids[i].width=Math.floor(vidW[i]*r); 
    } 
} 

Unfotunately、余分なスペースがいくつか登場しました。 FireFoxで私は新しいビデオサイズとしてフォームのウィンドウの高さ値（iH）を無効にするという最小値5を見つけました。