我不能擺脫以上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'); 

        }); 
       } 

所以loooks當它顯示在我的網站http://scott.ewarena.com/blog上時非常好，但在移動設備上查看時，頂部有間隙，在視頻之前，在頂部欄下面，那不應該在那裏。

我找不出問題所在，我一直在嘗試兩天。

對不起，我的代碼太笨重了。我是新來的，知道它需要清理一下。

任何幫助將非常感謝！

謝謝！ 斯科特

Answer 1

說完看着在Chrome瀏覽器開發工具的代碼我注意到，你在你的樣式表的定義如下：

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

如果刪除bottom: 0;你不會有這樣的問題！

基本上，你迫使視頻處於容器的最底部，當視口大小爲智能手機時，會造成間隙。