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

});
}

（顺便说一句，在移动设备上查看时，我无法让视频播放按钮消失 - 如果有人也可以使用它，那就太棒了！）

谢谢！斯科特

Answer 1

删除.video-container类上的背景元素：

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

HTML5视频顶部的黑色差距？

1 个答案: