Kann der Video-Header nicht an die Bildschirmgröße angepasst werden?

Question

Ich versuche, einen Video-Header zu erstellen, aber was auch immer ich versuche, scheint entweder zu überfüllen, und der Bildschirm horizontal zu scrollen, weil seine Originalgröße ziemlich groß ist (ich verwende einen kleinen Monitor), oder es verkleinert sich zu einem kleinen Größe oder verschwindet.

Auch mein Text und Schaltflächen werden zur Seite geschoben, obwohl das Video einen niedrigeren Z-Index als der Rest der Elemente hat. Ich kann das Video scheinbar nicht auf den Bildschirm bringen. Ich habe es für das ursprüngliche Bannerbild geschafft, das ich hatte, kann aber aus irgendeinem Grund nicht für das Video.

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

Zum Zweck Sie den Vergleich zwischen dem Banner Bild zeigt und das Video, das ich das Banner Bild hochgeladen verlassen haben. Wie Sie hier sehen können: test page der Text wird vom Video weggeschoben (auch wenn ich das Video auf z-index: -9999; setze), Sie werden auch bemerken, dass das Bild nicht zum Scrollen der Seite führt, es funktioniert großartig. Ich kann das für das Video nicht nachvollziehen.

Ich habe 3-4 verwandte Themen hier auf stackoverflow durchgelaufen, die versuchen, eine Lösung aber kein Glück herauszufinden. Alle und alle Vorschläge werden sehr geschätzt.

Vielen Dank für Ihre Zeit!

Answer 1

Ich würde vorschlagen, Ihre CSS ein wenig Umstrukturierung, aber lassen Sie mich wissen, wenn dies nicht der Fall ist, was Sie wollen:

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; 
 
}

Ich habe den Z-Index aus den Video-Styles verschoben, um damit zu beginnen, das ist besser auf das Div angewendet, in dem es sitzt. Die Vid eoCont div Ich habe absolute Positionierung eingestellt, mit einer Breite von 100% und einem Z-Index von 1. Dann wird das Text-vertikal-center-div darüber positioniert - auch mit position: absolute, jedoch mit einem höheren z- Index.

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

Edit: Ich tatsächlich einen Dienst zeitweise zum Einrichten Vollbild Held Videos genannt coverr.co verwenden. Sie haben ein großes Snippet an der Unterseite ihrer Seite, die einen Block von HTML, CSS und Jquery hat, die es ziemlich einfach macht, diese einzurichten. Es behandelt auch Fallbacks für alte Browser und einen jpg Fallback.

http://www.coverr.co/

Ihr Code wie folgt aussieht:

//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

versuchen diese

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