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％和全高）

我确定这是保持尺寸，我juts无法弄清楚如何改变它。

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


});


}

屏幕到宽时，视频不会全宽

2 个答案: