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; 
}