数秒後にSafari 10のビデオタグが上に移動する

Question

ビデオを再生するとわずか数秒後にビデオが50％上がり、コントロールとビデオの下半分が表示されます。

この問題はSafariのみ10で発生し、サファリ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です（私は」サファリは、それがビデオタグを扱う方法を変更しましたように、mは、画面の真ん中）

.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"属性がビデオにコントロールを強制していました。

（ここでは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; 
}