如何在全屏模式下保持嵌入式視頻爲中心

Question

我成功地將youtube嵌入式視頻居中，但問題是，當我進入全屏模式時，視頻位置因爲transform:translate(-50%)財產

這裏是我的代碼：

<div class="videoWrapper"> 
<iframe class="trailervideo" width="560" height="315" 
src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" 
allowfullscreen></iframe> 
<div> 

CSS：

.videoWrapper { 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 25px; 
height: 0; 
} 
.videoWrapper iframe { 
position: absolute; 
max-width:560px; 
max-height:315px; 
width: 95%; 
height: 95%; 
left:50%; 
transform:translate(-50%); 
} 

Link of fiddle

Answer 1

，當我去到全屏模式，視頻位置，因爲變換的畫面：翻譯（-50％）財產

那麼就讓我們只是拋出去，用汽車代替中心元素的邊距：

.videoWrapper iframe { 
    position: absolute; 
    max-width:560px; 
    max-height:315px; 
    width: 95%; 
    height: 95%; 
    left:0; 
    right:0; 
    margin: auto; 
}