ビデオ100％幅と高さ

私はビデオを持っており、幅の100％と高さの100％を埋めるようにします。アスペクト比を維持します。ビデオ100％幅と高さ

少なくとも両方の場合100％を満たす可能性はありますか？アスペクト比を維持するためにビデオのビットが画面外になければならない場合は、それは問題ではありません。

HTML：

<video preload="auto" class="videot" id="videot" height="100%" preload> 
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" > 
    <object data="BESTANDEN/video/tible.mp4" height="1080"> 
     <param name="wmode" value="transparent"> 
     <param name="autoplay" value="false" > 
     <param name="loop" value="false" > 
    </object>

CSS：

.videof, .videot { 
    width: 100% !important; 
    height: 100% !important; 
}

出典

2013-11-21 Milan

代わりに 'max-width'と' max-height'を使ってみてください。 'width'と' height'を100％に設定することで、正確な寸法に合わせてビデオを伸ばしているかもしれません。 – Scott

max-heightとwidthが機能しなかったので、min-widthとmin-heightを代わりに使用しました。しかし、今ビデオはフルスクリーンですが、幅にはまだ最大値があります。ビデオサイズそして、それは大きくなることはありません... – Milan

を見てくださいビデオwの比率に基づいて負の左マージンを使用して中央に配置しますウィンドウ幅の幅。私はこれを達成するためにJavaScriptとCSSを使用し

http://jsfiddle.net/RfV5C/

var $video = $('video'), 
    $window = $(window); 

$(window).resize(function(){ 
    var height = $window.height(); 
    $video.css('height', height); 

    var videoWidth = $video.width(), 
     windowWidth = $window.width(), 
    marginLeftAdjust = (windowWidth - videoWidth)/2; 

    $video.css({ 
     'height': height, 
     'marginLeft' : marginLeftAdjust 
    }); 
}).resize();

出典

2013-11-22 16:37:50 Gladstone24

ウィンドウサイズを拡大して空白を残した場合、これは幅と高さの両方を満たしません。そうではなく、本当に彼の質問に対する受け入れられる答え。 – Chrillewoodz

ウィンドウのサイズを変更する場合は、ビデオサイズを変更する関数を呼び出す必要があります。 – duhaime

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

あなたが動的にウィンドウの100％に高さを設定するためにJavascriptを使用することができ、ここで http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

出典

2013-11-21 18:01:09

それは彼が望んでいたものではありません.. –

それにもかかわらず、これは私が必要とした解決策でした;）そのtippのためのthx、そしていいえ！ – ggzone

。 JS関数は、initおよびwindow resizeで一度呼び出す必要があります。 Chromeでテスト済みです。

HTML：

<video width="1920" height="1080" controls> 
    <source src="./assets/video.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video>

はJavaScript：

function scaleVideo() { 
    var vid = document.getElementsByTagName('video')[0]; 
    var w = window.innerWidth; 
    var h = window.innerHeight; 

    if (w/16 >= h/9) { 
     vid.setAttribute('width', w); 
     vid.setAttribute('height', 'auto'); 
    } else { 
     vid.setAttribute('width', 'auto'); 
     vid.setAttribute('height', h); 
    } 
}

CSS：

video { 
    position:absolute; 
    left:50%; 
    top:50%; 
    -webkit-transform:translate(-50%,-50%); 
    transform:translate(-50%,-50%); 
}

出典

2015-03-11 14:30:35 walteronassis

これはdivのコンテナ内のビデオのために私のために動作します。

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

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

参考：MDNから