當屏幕變寬時，視頻不會全寬

Question

我使用this script在我的主頁上放置視頻。

問題是，當您用瀏覽器窗口查看全寬和50％的高度時，它不會填滿整個窗口。

$(element).each(function(){ 
    var videoAspectRatio = $(this).data('height')/$(this).data('width'), 
     windowAspectRatio = windowHeight/windowWidth; 

    if (videoAspectRatio > windowAspectRatio) { 
     videoWidth = windowWidth; 
     videoHeight = videoWidth * videoAspectRatio; 
     $(this).css({'top' : -(videoHeight - windowHeight)/2 + 'px', 'margin-left' : 0}); 
    } else { 
     videoHeight = windowHeight; 
     videoWidth = videoHeight/videoAspectRatio; 
     $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth)/2 + 'px'}); 
    } 

夠搞怪它工作的其他方式（寬度設置爲屏幕和全高度的30％）

我敢肯定，它在保持尺寸，我凸狀部無法弄清楚如何改變它。

Live preview here

Answer 1

這個工作

function scaleVideoContainer() { 

var height = $(window).height(); 
var unitHeight = parseInt(height) + 'px'; 
$('.homepage-hero-module').css('height',unitHeight); 

} 

function initBannerVideoSize(element){ 

$(element).each(function(){ 
    $(this).data('height', $(this).height()); 
    $(this).data('width', $(this).width()); 
}); 

scaleBannerVideoSize(element); 

} 

function scaleBannerVideoSize(element){ 

var windowWidth = $(window).width(), 
    windowHeight = $(window).height(), 
    videoWidth, 
    videoHeight; 


$(element).each(function(){ 
    var videoAspectRatio =  $(this).data('height')/$(this).data('width'), 
     windowAspectRatio = windowHeight/windowWidth; 

    if (videoAspectRatio > windowAspectRatio) { 
     if (windowAspectRatio < 0.564){ 
     videoWidth = windowWidth * 1.15; 
     videoHeight = videoWidth * videoAspectRatio * 1.15; 
     $(this).css({'top' : -(videoHeight - windowHeight)/2 + 'px', 'margin-left' : '-20px'}); 
     }else{ 
     videoWidth = windowWidth; 
     videoHeight = videoWidth * videoAspectRatio; 
     $(this).css({'top' : -(videoHeight - windowHeight)/2 + 'px', 'margin-left' : 0}); 
     } 
    } else { 
     if (windowAspectRatio < 0.564){ 
     videoHeight = windowHeight * 1.15; 
     videoWidth = videoHeight/videoAspectRatio * 1.15; 
     $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth)/2 * 1.1 + 'px'}); 
     }else{ 
     videoHeight = windowHeight; 
     videoWidth = videoHeight/videoAspectRatio; 
     $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth)/2 + 'px'}); 
     } 
    } 

    $(this).width(videoWidth).height(videoHeight); 

    $('.homepage-hero-module .video-container video').addClass('fadeIn animated'); 


}); 


} 

Answer 2

你可以只保留比例設置的風格是這樣的：

width: 100%; 
    height: auto;