js：如何让视频在页面全屏并且右上角显示跳过按钮

背景

有个需求是首页的时候直接出来一个全屏的视频，右上角有个跳过按钮，点击跳过进入网站或者视频播放完进入网站，现在分别提供了pc端和移动端两个视频：

• pc端视频大小 1920*1080
• 移动端视频大小 750*1624（iphoneX大小）

要让视频没有黑边并且全屏，接下来看代码

代码

<div class="new-video-container">
    <button type="button" class="new-video j_new-video">跳过</button>
    <video data-app-id="***" data-file-id="******" class="tc-video-container" data-is-auto="1" data-src="" playsinline="true" preload="auto" webkit-playinline="true" x5-playinline="true"></video>
</div>

// 初始化腾讯视频的回调
window.postTCVideos(function(videos) {
  // 隐藏视频
  function hideVideo() {
    $('.new-video-container').hide();
    videos[0].dispose();
  }
  // 点击右上角的按钮隐藏视频
  $('.j_new-video').on('click', function(e) {
    e.preventDefault();
    hideVideo();
  });
  // 视频播放结束隐藏视频
  videos[0].on('ended', function() {
    hideVideo();
  });
  if (!isPhone) {
    let width = $(window).width();
    let height = $(window).height();
    console.log('比较', width / height, 1920 / 1080);
    // 让视频全屏的方法
    if (width / height > 1920 / 1080) {
      $('.new-video-container .vjs-tech').css({
        width: '100%',
        height: 'auto'
      });
    } else {
      $('.new-video-container .vjs-tech').css({
        width: 'auto',
        height: '100%'
      });
    }
  }
});

.new-video-container {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
	video {
		/* pc端这里要通过js动态判断宽高 */
		// width: auto !important;
		// height: 100% !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
		@media (--mobile) {
			/* 移动端只需要宽100%，就可以全屏啦 */
			width: 100% !important;
			height: auto !important;
			left: 0 !important;
			top: 50% !important;
			transform: translate(0px, -50%);
		}
	}
	&>.new-video {
		position: absolute;
		z-index: 10;
		right: 20px;
		top: 20px;
		font-size: 25px;
		width: 150px;
		height: 50px;
		background: #fff;
		outline: none;
		border: none;
		color: #00746e;
		text-align: center;
		border-radius: 100px;
		@media (--mobile) {
			right: 0.2rem;
			top: 0.2rem;
			font-size: 0.3rem;
			width: 1.5rem;
			height: 0.7rem;
			border-radius: 0.5rem;
		}
	}
	#tc-video-container-0 {
		width: 100%;
		height: 100%;
	}
}