javascript - 移动设备上的HTML5视频以下存在较大差距

由于某些原因（仅在移动设备上），在我的页面http://scott.ewarena.com/blog上的此视频之后出现了很大的差距-很大的差距仅出现在移动设备上。

有任何想法吗？

谢谢！ :)

史考特

CSS：

            /* Video CSS */
            .homepage-hero-module {
                border-right: none;
                border-left: none;
                position: relative;
                width: auto;
                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: absolute;
                bottom: 0%;
                left: 0%;
                height: 100%;
                width: 100%;
                overflow: hidden;

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

            #video_overlays {
            position:absolute;
            float:left;
                width:100%;
                height:400px;
                background-color:transparent;
                z-index:1;
            }

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">Let's work together</a></p>
                    </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">
                            </video>
                                                    <div class="poster hidden">
                            <img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
                            </div>
                    </div>
                </div>

最佳答案

尝试使.homepage-hero-module高度35vh

.homepage-hero-module {
  height: 35vh; /* 35% of viewport height */
}