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