Javascript 移动设备上HTML5视频的差距较大

出于某种原因（并且仅在移动设备上），在我的页面上的视频之后出现了一个很大的差距——这个大差距只出现在移动设备上

有什么想法吗

谢谢！：）

斯科特

CSS:

HTML:

您的浏览器不支持视频标记。我建议你升级你的浏览器。
您的浏览器不支持视频标记。我建议你升级你的浏览器。
标签“>

尝试制作

。主页英雄模块

高度

35vh

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

---

我知道这没有多大帮助，但手机上的视频看起来很难看，因为在IOS上没有自动播放按钮。这会导致用小型设备的图像替换视频吗？降低

的高度。在mobileThank you@MichaelCoker上的主页英雄模块

，效果不错！我知道，有一种方法可以制作图像pear在移动设备上的位置，但我还没有找到解决方法！：）我找到了答案，那就是添加以下CSS:::-webkit媒体控制面板{display:none！重要；-webkit外观：none；}*：：--webkit媒体控制播放按钮{显示：无！重要；-webkit外观：无；}*：：-webkit媒体控件开始播放按钮{显示：无！重要；-webkit外观：无；}

                <!-- 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 {
  height: 35vh; /* 35% of viewport height */
}