視頻100％的寬度和高度

Question

我有一個視頻，我希望它填充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; 
} 

Answer 1

看看您可以使用JavaScript的高度動態設置窗口100％然後使用基於視頻比率w的負左邊距對其進行居中寬度到窗口寬度。

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

Answer 2

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

採取這裏 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 3

我使用JavaScript和CSS來實現這一目標。 JS函數需要在初始化和調整窗口時調用一次。剛剛在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%); 
} 

Answer 4

這在一個div容器對我的作品的視頻。

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

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

參考：http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Answer 5

通過檢查其他的答案，我使用的對象配合在CSS：

video { 
    object-fit: fill; 
} 

從MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit）：

該對象適合的CSS屬性指定如何將替換元素的內容安裝到由其使用的高度和寬度確定的框中。

值：填

被替換的內容的尺寸以填充元素的內容框：該對象的具體對象大小是元素的使用寬度和高度。

Answer 6

我是新來的所有這一切。也許你可以添加/更改這個HTML代碼。不需要CSS。它的工作對我來說:)

width="100%" height="height" 

Answer 7

如果您正在尋找相當於background-size: cover爲video。

video { 
    object-fit: cover; 
} 

這將填充容器而不會扭曲視頻。

---

^{PS：我在這裏上延伸Leo Yu's answer。}