html - 如何在全屏模式下保持 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

when I go to full-screen mode, the video position is out of the screen because of transform:translate(-50%) property

那么让我们把它扔掉，改用自动边距使元素居中:

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