我不能摆脱以上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;你不会有这样的问题！

基本上，你迫使视频处于容器的最底部，当视口大小为智能手机时，会造成间隙。