移动设备上HTML5视频之下的巨大差距

出于某种原因（并且仅在移动设备上），我的页面上的此视频出现了很大差距 - 仅在移动设备上出现较大差距。移动设备上HTML5视频之下的巨大差距

任何想法？

谢谢！ :)

斯科特

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>

来源

2017-02-13 Scott Davies

我知道这是没有太大的帮助，但视频Ø由于播放按钮而导致移动设备看起来很不雅观，并且没有在IOS上自动播放。这是否会导致只用小图片替换视频？ – Win

在手机上降低'.homepage-hero-module'的高度 –

谢谢@MichaelCoker，那是一种享受！赢我知道，有一种方法可以让图像出现在移动设备上的位置，但我还没有到处去解决这个问题！ :) –

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

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

来源

2017-02-13 23:53:38

移动设备上HTML5视频之下的巨大差距

回答

相关问题