无法让视频 header 适合屏幕大小？

Question

我正在尝试创建一个视频 header 但无论我尝试什么，它似乎要么溢出，并导致屏幕水平滚动，因为它的原始尺寸相当大（我使用的是小型显示器），或者它缩小到很小的尺寸或消失。

即使视频的 z-index 比其余元素低，我的文字和按钮也会被推到一边。我似乎无法让视频适应屏幕。我已经设法为我拥有的原始横幅图片做到这一点，但由于某种原因不能为视频做到这一点。

HTML:

    <!-- Header -->
<header id="top" class="header">
       <div class="videoCont">
        <video id="rndmVid" autoplay loop muted>
        <source src="http://convio.cancer.ca/mUFE/2016/one/videos/flower.mp4" type="video/mp4">
        </video>
       </div>
        <div class="text-vertical-center">
            <h1>Event Title</h1>
            <h3>Tag Line</h3>
            <br>
            <a href="#about" class="btn-dark btn-lg">Learn More</a>
<p>&nbsp;</p>

//log-in html code

</header>

CSS:

video {
  height: 100%;
  width: 100%;
  z-index: -1;

}

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(http://convio.cancer.ca/mUFE/2016/one/img/cliffside.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

}


.header h1 {
    font-size: 6.5em;
    color: #FFF;
    text-shadow: 2px 2px 2px rgb(0,0,0);
}

.header h3{
    font-size: 4em;
    color: #fff;
    text-shadow: 2px 2px 2px rgb(0,0,0);
}

为了向您展示横幅图片和视频之间的比较，我保留了上传的横幅图片。正如您在此处看到的：test page 文本被视频推开（即使我将视频设置为 z-index: -9999;），您还会注意到图像不会导致页面滚动效果很好。我似乎无法将其复制到视频中。

我已经在 Whosebug 上浏览了 3-4 个相关主题，试图找出解决方案，但没有成功。非常感谢任何和所有建议。

感谢您的宝贵时间！

Answer 1

试试这个

video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  transform: translateX(-50%) translateY(-50%);
}

Answer 2

我建议稍微调整一下 css，但如果这不是您想要的，请告诉我：

video {
  height: 100%;
  width: 100%;
}

.videoCont {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.text-vertical-center {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

我已经将 z-index 从视频样式中移出，这更适用于它所在的 div。 videoCont div 我设置为绝对定位，宽度为100%，z-index为1。然后文本垂直中心 div 位于其上方 - 也使用 position:absolute，但具有更高的 z-index。

http://codepen.io/anon/pen/wWWOOB

编辑：实际上，我有时会使用一项名为 coverr.co 的服务来设置全屏英雄视频。他们在网站底部有一个很棒的片段，其中包含 HTML、CSS 和 Jquery 块，这使得设置它们变得非常容易。它还处理旧浏览器的回退和 jpg 回退。

http://www.coverr.co/

他们的代码如下所示：

//jQuery is required to run this code
$( 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');

    });
}

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden">
            <img src="PATH_TO_JPEG" alt="">
        </div>
    </div>
</div>

无法让视频 header 适合屏幕大小？

Can't get video header to fit screen size?

html

css

html5-video