移動設備上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視頻之下的巨大差距

回答

相關問題