如何在全屏模式下保持youtube嵌入式视频居中

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