我無法擺脫HTML5視頻上方的這一空白（在移動設備上）

Question

的HTML

    <div class="NavAlignLeft"><a href="/">Site Name</a></div>

    <div class="NavAlignRight"> 
<!-- Change this to an include later -->        
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>

</div>
    <div style="clear:both;"></div>     

</div>

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

CSS：

        body {
            background-color: #e2e2e2;  
            margin: 0px;
        }

        h1, .h1,
        h2, .h2,
        h4, .h4,
        h5, .h5,
        h6, .h6 {
          margin-top: 0;
          font-family: 'Vollkorn', serif;
          font-style: oblique;  
          font-weight: normal;
          color: #2e2e2e;
        }

        h3, .h3 {
        font-family: 'Vollkorn', serif;    
        font-weight: bold;    
        font-size: 30px;    
        color: #fff;    
        }

        .NavAlignLeft {    
        font-family: 'Vollkorn', serif;    
        /*font-style: oblique;*/    
        font-weight: bold;    
        font-size: 22px;    
        color: #fff;    
        float: left;
        padding-left: 40px;
        }

        .NavAlignLeft:hover {
            font-family: 'Vollkorn', serif;
        text-decoration: none;
        }

        .NavAlignRight {    
        font-family: 'Vollkorn', serif;    
        font-weight: bold;    
        font-size: 22px;    
        color: #fff;    
        float: right;
        padding-right: 40px;
        }

        .NavAlignLeft, .NavAlignRight {
            /*{  width: 50%;  Commenting this out made the nav align completely to the right.*/
        display: inline-block;
        }

        a, .a,
        a:visited, .a:visited,
        a:active, .a:active {
            font-family: 'Vollkorn';
            font-style: none;   color: #e2e2e2;     text-decoration: none;
        }

        a:hover, .a:hover {
            font-family: 'Vollkorn';
            font-style: none;   color: #fff;        text-decoration: none;
        }
        /*
         * Override Bootstrap's default container.
         */

        /*@media (min-width: 1200px) {
          .container {
            width: 100%;    padding: 0; margin: 0;    vertical-align: middle;
          }
        }  .container2 {    width: 100%;    padding: 0; margin: 0;  }

        Nothing changed */


        /*
         * Masthead for nav
         */

        #blog-masthead {
          background-color: #2e2e2e;
          height: 40px;  
          width: 100%;    
          line-height: 40px;
          /*z-index: 2;  
          /*vertical-align: middle;  

          padding-bottom: 0px;    
          padding-left: 10px;    
          padding-right: 10px;   Nothing Changed */
          -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);  
          -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);  
          box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);    
          border-bottom: 1px solid #1a1a1a;
        }

        .abovethefold  {  
        background-color: transparent;  
        /*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg");  */
        /*height: 250px;  
        width: 100%;  
        /*padding-top: 100px;*/
        /*vertical-align: middle;
        justify-content:center;
            align-content:center; 
        }
        .overlay {   
        background:#2e2e2e;   
        opacity:40%;   
        height: 250px;   
        width: 100%Nothing changed.*/
        }

        /* Nav links */

        .blog-nav-item {
          /*position: relative;
          display: inline-block;
          padding: 5px;
          color: #2e2e2e; nothing changed*/
        }
        .blog-nav-item:hover,
        .blog-nav-item:focus {
          color: #fff;
          text-decoration: none;
        }

        /* Active state gets a caret at the bottom */
        .blog-nav .active {
          color: #fff;
        }
        .blog-nav .active:after {
          /*position: absolute;
          bottom: 0;
          left: 50%;
          width: 0;
          height: 0;
          margin-left: -5px;
          vertical-align: middle;
          content: " ";
          border-right: 5px solid transparent;
          border-bottom: 5px solid;
          border-left: 5px solid transparent; Nothing Changed*/
        }
        .menu-menu-1-container {   
        /*width: 100%;    
        vertical-align: middle;  
        padding-top: 0px;    
        padding-bottom: 0px;    
        padding-left: 10px;    
        padding-right: 10px;   Nothing changed*/}

        /*
         * Blog name and description
         */

        .blog-header {
          padding-top: 20px;  
          padding-bottom: 20px;
        }

        .blog-title {
          margin-top: 0px;
          margin-bottom: 0;  
        line-height: 80px;
        margin-top: 100px;
          font-size: 60px;      
          text-align:center;  
          font-weight: normal;  
          color: #fff;  
        }

        .blog-description {
          font-size: 30px;  
          font-style: 'Open Sans';  
          font-weight: bold;  
          text-align: center;
          color: #2e2e2e;
        }

        .blog-main {
          font-size: 18px;
          line-height: 1.5; nothing changed
        }

        /* Buttons */

        .green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {   
        display: block; 
        border: 0;  
        border-radius:1em;  
        -webkit-border-radius:border-radius:.8em;   
        text-align: center; 
        font-size: 20px !important; 
        padding: 10px 20px; 
        width: 180px;
        }

        p.button {  
        text-align: center;
        }

        p.button:hover {    
        text-align: center; 
        text-decoration: none;
        }

        p.button a {    
        margin:0 auto;  
        font-family: 'Vollkorn', serif; 
        font-style: none;
        text-decoration: none;
        }

        .blue-button,.blue-button:link,.blue-button:visited {   
        background: #2f75c5;    
        color: #f8f8f8 !important;
        text-decoration: none;
        }

        .blue-button:hover {    
        background: #3584de;    
        cursor: pointer;    
        text-decoration: none;  
        }

        .blue-button:active {   
        background: #2966ab; 
        font-style: none;}

        /* Sidebar modules for boxing content */
        /* Sidebars arent being used
        .sidebar-module {
          padding: 15px;
          margin: 0 -15px 15px;
        }
        .sidebar-module-inset {
          padding: 15px;
          background-color: #f5f5f5;
          border-radius: 4px;
        }
        .sidebar-module-inset p:last-child,
        .sidebar-module-inset ul:last-child,
        .sidebar-module-inset ol:last-child {
          margin-bottom: 0;
        }

        */

        /* Pagination */
        .pager {
          /*margin-bottom: 60px;
          text-align: left;nothing changed*/
        }
        .pager > li > a {
        /*  width: 140px;
          padding: 10px 20px;
          text-align: center;
          border-radius: 0px;    
          list-style: none; nothing changed*/
        }


        /*
         * Blog posts
         */

        .blog-post {
            margin:50px 50px 0;
        }
        .blog-post-title {
          margin-bottom: 5px;
          font-size: 40px;  color: #2e2e2e;
        }

        .subtitle {  
        font-size: 1.2em;    
        font-family: 'Vollkorn';  
        color: #2e2e2e;
        }

        .blog-post-meta {
          margin-bottom: 20px;
          color: #999;
        }

        /*
         * Footer
         */

        .blog-footer {
          padding: 40px 0;
          color: #999;
          text-align: center;
          background-color: #2e2e2e;
          border-top: 1px solid #1a1a1a;
          -webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
        -moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
        box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
        }

        .blog-footer p:last-child {
          margin-bottom: 0;
        }

        /*** lyrathemes - custom styling ***/

        .page_item {  
        list-style: none;  
        font-size: 22px;  
        text-decoration: none;
        }

        .page_item:hover {
            list-style: none;
            text-decoration: none;
            }

        ul.blog-nav {
        /*list-style: none;*/
        }
        /* Nav links */
        .menu-item a{
          position: relative;
          /*display: inline-block; keep this commented out - moved navigation vertically.*/ 
          padding: 10px;
          color: #e2e2e2;

        }
        .menu-item a:hover,
        .menu-item a:focus {
          color: #fff;
          text-decoration: none;
        }

        /* Active state gets a caret at the bottom */
        .menu-item.current-menu-item a{
          color: #fff;
        }
        .menu-item.current-menu-item a:after {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0;
          height: 0;
          margin-left: -5px;
          vertical-align: middle;
          /*content: " ";*/
        /*  border-right: 5px solid transparent;
          border-bottom: 5px solid;
          border-left: 5px solid transparent;*/
            -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);  
          -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);  
          box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);  
        }

        /*Not using side bars
        .sidebar-module ul {
            list-style: none;
            padding-left: 0;
        }*/

        /* 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;
            /*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%;
            }

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

        /* Content Table Styles */

        #green-table {
        background-color: #ebf2e6;  
        width: 50%;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        margin: auto;
        margin-top:30px;
        margin-bottom: 30px;
        border: 1px solid #d6e8c5;
        border-radius:.8em; 
        }

        #dark-table {
        background-color: #2e2e2e;  
        width: 100%;  
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        margin-top:30px;
        margin-bottom: 30px;
        }

        #light-table {
        background-color: #e2e2e2;  
        width: 100%;  
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        margin-top:30px;
        margin-bottom: 30px;
        }

        #dark-narrow-table {
        background-color: #2e2e2e;  
        /*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg");  */
        width: 50%;  
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        margin-top:30px;
        margin-bottom: 30px;
        margin: auto;
        border-radius:.8em; 
        }

        /*Heading Styles*/

        #light-table-head-style {

        font-family: 'Droid Serif';
        font-size: 45px;
        color: #2e2e2e;

        }

        #dark-table-head-style {

        font-family: 'Droid Serif';
        font-size: 45px;
        color: #e2e2e2;

        }

        #green-table-head-style {

        font-family: 'Droid Serif';
        font-size: 45px;
        color: #2e2e2e;

        }

        #dark-narrow-table-head-style{

        font-family: 'Droid Serif';
        font-size: 45px;
        color: #e2e2e2;

        }

        /*Content Paragraph Styles*/

        #light-table-paragraph {

        font-family: 'Droid Serif';
        font-size: 22px;
        color: #2e2e2e;
        text-align: left;

        }

        #dark-table-paragraph {

        font-family: 'Droid Serif';
        font-size: 22px;
        color: #e2e2e2;

        }

        #dark-narrow-table-paragraph {

        font-family: 'Droid Serif';
        font-size: 22px;
        color: #e2e2e2; 

        }

        #green-table-paragraph {

        font-family: 'Droid Serif';
        font-size: 22px;
        color: #2e2e2e;
        text-align: left;

        }

        /* Hamburger Test */

         /* Remove margins and padding from the list, and add a black background color */
        ul.topnav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #2e2e2e;
        }

        /* Float the list items side by side */
        ul.topnav li {float: left;
        height: 40px;
        }

        /* Style the links inside the list items */
        ul.topnav li a {
            display: inline-block;
            color: #e2e2e2;
            text-align: center;
            padding: 0px 10px 0px 0px; 
            text-decoration: none;
            transition: 0.3s;
        font-family: 'Vollkorn', serif;    
        font-weight: bold;    
        font-size: 22px;    
        color: #e2e2e2;
        }

        /* Change background color of links on hover */
        ul.topnav li a:hover {background-color: #3b3b3b;}

        /* Hide the list item that contains the link that should open and close the topnav on small screens */
        ul.topnav li.icon {display: none;}

        /* Hamburger mobile test */

         /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
        @media screen and (max-width:680px) {
          ul.topnav li:not(:first-child) {display: none;}
          ul.topnav li.icon {
            float: right;
            display: inline-block;
          }
        }

        /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
        @media screen and (max-width:680px) {
          ul.topnav.responsive {position: relative;}
          ul.topnav.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          ul.topnav.responsive li {
            float: none;
            display: inline;
          }
          ul.topnav.responsive li a {
            display: block;
            text-align: left;
          }
        }

        /* Fixing Mobile Div Problem */

        @media only screen and (max-device-width: 680px) {

        #green-table {
        width: 95%; 
        }

        #dark-narrow-table {
        width: 95%; 
        }

        .NavAlignRight {    
        padding-right: 2px;
        }

        .NavAlignLeft {    
        padding-left: 2px;

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

                    });
                }

因此，當它顯示在我的網站http://scott.ewarena.com/blog上時，它看起來絕對不錯，但是在移動設備上觀看時，頂部，頂部欄下方，視頻之前的間隙不應該是那里。

我根本找不到問題所在，我已經嘗試了兩天。

抱歉，我的代碼太笨拙了。 我是新來的，知道它需要清理一點。

任何幫助都感激不盡！

謝謝！ 史考特

Answer 1

在Chrome開發工具中查看了代碼之后，我注意到您在樣式表中定義了以下內容：

.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}

如果除去bottom: 0; 你不會有這個問題！

基本上，您是在將視頻大小設置為智能手機大小的情況下，將視頻強制置於其容器的最底端，從而造成間隙。