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

背景

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

• pc端视频大小 1920*1080
• 移动端视频大小 750*1624&＃xff08;iphoneX大小&＃xff09;

要让视频没有黑边并且全屏&＃xff0c;接下来看代码

代码

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


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


.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%);&＃64;media (--mobile) {/* 移动端只需要宽100%&＃xff0c;就可以全屏啦 */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;&＃64;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%;}
}