Черный разрыв в верхней части HTML5 видео?

Question

У меня есть этот странный черный промежуток в верхней части видео HTML5, в котором я работаю. CSS/HTML/JS на этой скрипичной странице: https://jsfiddle.net/w6wfdeco/2/

HTML:

<!-- Video test --> 

<div id="video_overlays"> 

<div class="abovethefold"> 
    <h1 class="blog-title"><?php bloginfo('name'); ?></h1> 
    <?php $description = get_bloginfo('description', 'display'); ?> 
    <?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?> 

     <p class="button"> 
<a class="blue-button" href="#cta">Call to Action</a></p> 
</div></div> 

</div> 


<div class="homepage-hero-module"> 
<div class="video-container"> 
    <div class="filter"></div> 
    <video autoplay loop class="fillWidth"> 
     <source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. 
     <source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. 
     <img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag"> 
           <div class="poster hidden"> 
     <img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt=""> 

     </video> 
     </div> 
</div> 

CSS:

.homepage-hero-module { 
border-right: none; 
border-left: none; 
position: relative; 
width: 100%; 
height: 400px; 
} 
.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%; 
} 

JS:

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

}); 
} 

(как в стороне, я не могу получить t он нажимает кнопку воспроизведения видео, чтобы исчезнуть, когда это просматривается на мобильных устройствах - если кто-то может с этим справиться, это будет здорово!)

Спасибо! Скотт

Answer 1

Удаление фона элемента на классе .video-контейнера:

.video-container { 
    position: relative; 
    bottom: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background: #000; 
} 

Как это:

.video-container { 
    position: relative; 
    bottom: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

избавляется от черной полосы и оставляет эту область прозрачной.

Еще одна маленькая вещь, чтобы попробовать:

Вы можете обернуть видео в другой DIV, чтобы дать что-то другое, что определяет высоту видео, а не только жестко закодированного 400px высотой, которая будет оставаться в качестве 400px полосы видео на любой размер экрана.

<div id="homepage-wrapper"> 
    <div class="homepage-hero-module"> 
... 
    </div> 
</div> 

И CSS

#homepage-wrapper { 
    width: 100%; 
    height: 500px; 
    background-color: #eee; 
} 

Обертывание видео весь раздел будет легче управлять содержанием в них, что ваше видео контейнерными наследует.

Вы можете увидеть изменения, которые я сделал здесь: https://jsfiddle.net/kgill/napfds5o/3/