如何保持视频覆盖整个div答案

【问题标题】：How to maintain video cover entire div如何保持视频覆盖整个div
【发布时间】：2018-06-08 16:40:05
【问题描述】：

我为我的网站使用了封面背景视频，但是当我将其大小调整为移动设备然后再次切换到桌面视图时，视频有额外的空间。我认为这也发生在 Coverr.co 网站上。不确定他们是否有支持。

如何保持视频覆盖整个 div？这可以通过css媒体查询修复还是需要修改coverr的javascript代码？

我尝试了适合对象的封面，但我认为 IE Edge 没有解决方法。

谢谢！

这是jquery代码

$( document ).ready(function() {

  scaleVideoContainer();

  initBannerVideoSize('.video-container .poster img');
  initBannerVideoSize('.video-container .filter');
  initBannerVideoSize('.video-container video');

  $(window).on('resize', function() {
    scaleVideoContainer();
    scaleBannerVideoSize('.video-container .poster img');
    scaleBannerVideoSize('.video-container .filter');
    scaleBannerVideoSize('.video-container video');
  });
});

function scaleVideoContainer() {

  var height = $(window).height() + 5;
  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() + 5,
  videoWidth,
  videoHeight;

  // console.log(windowHeight);

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

    $(this).width(windowWidth);

    if(windowWidth < 1000){
        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');

  });
}

【问题讨论】：

标签： jquery html css html5-video

【解决方案1】：

你可以使用这个代码：

    <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; ">

    <video width="100% " controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4 " type="video/mp4 ">
        <source src="https://www.w3schools.com/html/mov_bbb.ogg " type="video/ogg "> Your browser does not support HTML5 video.
    </video>
</div>

【讨论】：

【解决方案2】：

我遇到了同样的问题。问题在于这段代码：

if(windowWidth < 1000){
    videoHeight = windowHeight;
    videoWidth = videoHeight / videoAspectRatio;
    $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
    $(this).width(videoWidth).height(videoHeight);
}

因此，当您将其大小调整为移动设备，然后再返回时，它仍然具有上述 CSS。我所做的修复它是包含一个“else”，当你调整它的大小时：

if(windowWidth < 1000){
    videoHeight = windowHeight;
    videoWidth = videoHeight / videoAspectRatio;
    $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'}                
    $(this).width(videoWidth).height(videoHeight)
}
else{
    // this resets the CSS applied above
    $(this).css({'margin-top' : '', 'margin-left' : ''});
    $(this).width(windowWidth).height("");
}

希望这会有所帮助！

【讨论】：