当屏幕变宽时，视频不会全宽

Question

我使用 this script 在我的主页上放置了一个视频。

问题是当您使用浏览器 window 以全宽和 50% 的高度查看它时，它不会填满整个 window。

$(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

您可以像这样设置样式来保持比例：

    width: 100%;
    height: auto;

Answer 2

这有效

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


});


}

当屏幕变宽时，视频不会全宽

Video will not go full width when screen to wide

javascript

css

video

width