Question

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

即使视频的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;），您也会注意到图片不会导致滚动页面效果很好。我无法为视频复制此内容。

我在stackoverflow上经历了3-4个相关的线程，试图找出解决方案，但没有运气。非常感谢任何和所有建议。

感谢您的时间！

Answer 1

我建议稍微调整你的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>

Answer 2

试试这个

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

无法获得适合屏幕大小的视频标头？

2 个答案: