HTML5视频全屏模式 - 偏离中心的视频方式

Question

我有一个视频可以制作“虚假”的全屏动画。单击图像时，它会激活全屏宽度（以及尽可能多的高度）。

这是假全屏：  

当我点击视频本身的内置全屏图标时会发生以下情况：

我正在使用此处的脚本：http://tympanus.net/Tutorials/VideoOpeningAnimation/

似乎提供的脚本与我有类似的问题（但默认情况下没有启用控件）

我不认为全屏模式下的视频CSS风格可以被覆盖？这里发生了什么？

CSS：

	$(".action--play").on('click', function (e) {
		
		$(".video-wrap").addClass('video-wrap--show');
		$(".video-wrap").removeClass('video-wrap--hide');

		
		$('#videos')[0].play();
		
	});
	$(".action--close").on('click', function (e) {
		$(".video-wrap").addClass('video-wrap--hide');
		$(".video-wrap").removeClass('video-wrap--show');

		var video = document.getElementById('videos');
		video.pause();
		video.currentTime = 0;
		
	});

.video-wrap {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.video-wrap--show {
	pointer-events: auto;
}

.video-inner {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	opacity: 0;
	background: black;
}

.video-wrap--show .video-inner {
	opacity: 1;
}

.video-player {
	position: absolute;
	top: 50%;
	height: auto;
	width:100%;
	left:0;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

.video-wrap--show .action--close {
	opacity: 1;
	-webkit-transition-delay: 1.2s;
	transition-delay: 1.2s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.video-wrap--show {
	pointer-events: auto;
}

.video-wrap--show .video-inner {
	opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="video-wrap">
  <div class="video-inner">
    <video class="video-player" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_5mb.mp4" poster="assets/vid/media/woods.jpg" preload="auto" controls id="videos">
      <source src="assets/vid/media/woods.webm" type='video/webm; codecs="vp8.0, vorbis"'>
      <source src="assets/vid/woods.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
      <p>Sorry, but your browser does not support this video format.</p>
    </video>
    <button class="action action--close"><i class="fa fa-close"></i><span class="action__label action__label--hidden">Close preview</span></button>
  </div> <!-- /video-inner -->
</div><!-- /video-wrap-->


<img src="assets/images/play.png" id="play-button" class="action--play">