Safari 10上的視頻標籤在幾秒鐘後上升

Question

再現視頻後，視頻上升50％，並顯示控件和視頻的下半部分。

這個問題只發生在Safari 10，嘗試在Safari 9（和其他瀏覽器），它工作正常， 我已經複製問題上https://jsfiddle.net/antonino_R/d9tf0va3/4/

<div class="wrapper"> 
    <div class="wrapper-inner"> 
    <div class="wrapper-video"> 
     <video autoplay controls loop muted > 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/> 
     </video> 
    </div> 
    <div class="site-centered clearfix"> 
      <header class="entry-header"> 
      <h1 class="entry-title">this is a title</h1> 
      <h2 class="entry-subtitle">this is some text</h2> 
      </header> 
    </div> 
    </div> 
</div> 

，這是CSS（I」米想有標題和副標題在屏幕的中間）

.wrapper { 
    overflow: hidden; 
    color: #FFF; 
    border-top: 6px solid #9BA800; 
    background-color: #404040; 
    background: linear-gradient(145deg, #404040 0%, #111 100%); 
    position: relative; 
    z-index: 0; 
} 

.wrapper-video { 
    position: absolute; 
    z-index: 1; 
    top: 50%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.wrapper-video video { 
    width: 100%; 
    -webkit-filter: opacity(0.6) contrast(1.5); 
    filter: opacity(0.6) contrast(1.5); 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
} 

.site-centered { 
    max-width: 78em; 
    margin: 0 auto; 
    padding: 0 1.5em; 
} 

.wrapper .entry-header { 
    margin: 7.5em 0 3.5em 0; 
    font-weight: 300; 
    line-height: 1.5; 
    overflow: auto; 
    z-index: 10; 
    position: relative; 
    overflow: visible; 
    margin-bottom: 4.5em; 
} 

好像野生動物園已經改變了它把視頻標籤的方式

Answer 1

我發現問題： 基本上，視頻位於中間隱藏了控件，而html標籤上的「controls」屬性迫使視頻具有控件，Safari瀏覽器強制顯示控件，這就是爲什麼幾秒鐘後，該視頻被髮布到頂端，只以顯示控制

只刪除了「控制」屬性修復該問題：

（這裏的jsfiddle：https://jsfiddle.net/antonino_R/d9tf0va3/14/）

<div class="wrapper"> 
    <div class="wrapper-inner"> 
    <div class="wrapper-video"> 
     <video autoplay loop muted > 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/> 
     </video> 
    </div> 
    <div class="site-centered clearfix"> 
      <header class="entry-header"> 
      <h1 class="entry-title">this is a title</h1> 
      <h2 class="entry-subtitle">this is some text</h2> 
      </header> 
    </div> 
    </div> 
</div> 

和css更清潔：

.wrapper { 
    overflow: hidden; 
    color: #FFF; 
    border-top: 6px solid #9BA800; 
    background-color: #404040; 
    background: linear-gradient(145deg, #404040 0%, #111 100%); 
    position: relative; 
    z-index: 0; 
} 

.wrapper-video { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.wrapper-video video { 
    width: 100%; 
    -webkit-filter: opacity(0.6) contrast(1.5); 
    filter: opacity(0.6) contrast(1.5); 
    transform: translateY(-10%); 
    -webkit-transform: translateY(-10%); 
} 

.site-centered { 
    max-width: 78em; 
    margin: 0 auto; 
    padding: 0 1.5em; 
} 

.wrapper .entry-header { 
    margin: 7.5em 0 3.5em 0; 
    font-weight: 300; 
    line-height: 1.5; 
    overflow: auto; 
    z-index: 10; 
    position: relative; 
    overflow: visible; 
    margin-bottom: 4.5em; 
}