实现移除视频播放框架并让视频填满屏幕宽度的功能需求

我来帮你搞定这个需求——要实现移除播放框架且不影响其他元素，同时让视频铺满屏幕宽度，我们只需要调整goFull()函数的逻辑，处理好视频的容器迁移和样式设置就可以了。

核心思路 #

1. 脱离原框架容器：把视频从.content里移到body下，摆脱原框架的样式约束
2. 清除框架元素：彻底移除.box元素（包括它的伪元素边框样式），避免残留样式干扰页面其他内容
3. 适配全屏宽度：调整视频样式，让它铺满屏幕宽度，同时保持合理的比例

修改后的goFull()函数 #

直接替换你原来的空函数：

function goFull(){
  // 把视频从原容器移到body下，脱离框架
  document.body.appendChild(video);
  
  // 彻底移除框架容器，清除所有相关样式
  box.remove();
  
  // 设置视频样式，铺满屏幕宽度并保持比例
  video.style.position = 'relative';
  video.style.width = '100vw';
  video.style.height = 'auto';
  video.style.maxWidth = '100vw';
  video.style.maxHeight = '100vh';
  
  // 如果你想要视频完全覆盖屏幕（允许裁剪边缘），可以取消下面的注释
  // video.style.objectFit = 'cover';
}

为什么这样有效？ #

• 迁移视频容器：原.content和.box带有box-shadow、margin、position等样式，会限制视频的全屏展示，移到body下就能避开这些限制
• 移除框架元素：.box的伪元素有渐变边框，直接移除整个元素就能彻底清除框架的视觉效果，不会影响页面其他元素
• 调整视频样式：width:100vw确保视频占满屏幕宽度，height:auto维持视频原有的宽高比；如果需要视频完全覆盖屏幕（比如背景视频效果），启用object-fit: cover就可以实现

完整整合代码 #

这里是可以直接运行的完整代码，我还加了一点小优化（比如移除body的默认边距）：

<!DOCTYPE html>
<html>
<head>
 <style>
video {
 position: absolute;
 top: 0;
 left: 0;
 max-width: 100%;
 max-height: 100%;
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
}
body {
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #0b0e12;
 margin: 0; /* 移除body默认边距，避免全屏视频有间隙 */
}
.box {
 border-radius: 0.31vh;
 position: relative;
 overflow: hidden;
}
.box::after {
 content: '';
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: repeating-linear-gradient(-45deg, white 0 0.48828125vw, #f00c36 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
 width: calc(100vw + 1.380859375vw);
 height: calc(100vh + 1.380859375vw);
}
.box .content {
 position: relative;
 max-width: 100vw;
 max-height: 100vh;
 box-shadow: 0 0 0.262vh black, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
 margin: 0.45vh;
}
 </style>
</head>
<body>
 <div id='box' class="box">
 <div class="content"></div>
 </div>
 <script>
const clipSource = `https://langfox.ir/movie/movieclip/My_name_is_Edward_Bloom.mp4`;
const content = document.querySelector('.content');
const box = document.getElementById("box");
let video = document.createElement('video');
content.appendChild(video);
video.id = 'clip';
let clip = document.getElementById("clip");
clip.currentTime = 0;
let source = document.createElement('source');
source.src = clipSource;
source.type = 'video/mp4';
video.appendChild(source);
video.load();
setTimeout(() => { 
  // 切换使用goFull()代替injectViewportSizes()
  goFull(); 
  clip.play(); 
}, 3000);

function goFull(){
  // 将视频迁移到body下
  document.body.appendChild(video);
  // 移除框架容器
  box.remove();
  // 调整视频样式适配全屏宽度
  video.style.position = 'relative';
  video.style.width = '100vw';
  video.style.height = 'auto';
  video.style.maxWidth = '100vw';
  video.style.maxHeight = '100vh';
  // 可选：开启视频全屏覆盖（裁剪模式）
  // video.style.objectFit = 'cover';
}

function injectViewportSizes(){
 let screenWidth = screen.width;
 let screenHeight = screen.height;
 let vwPixels = screenWidth / 100;
 let clipWidth = clip.videoWidth;
 let clipHeight = clip.videoHeight;
 screenWidth = screenWidth - (screenWidth * 0.10); // available space to put the clip inside
 screenHeight = screenHeight - (screenHeight * 0.10);
 let clipWidthNew;
 let clipHeightNew;
 if(clipWidth > clipHeight){
 clipWidthNew = clipWidth;
 let ratio = clipWidth / clipHeight;
 while(screenWidth < clipWidthNew) {
 clipWidthNew--;
 }
 clipHeightNew = clipWidthNew / ratio;
 } else {
 clipHeightNew = clipHeight;
 let ratio = clipWidth / clipHeight;
 while(screenHeight < clipHeightNew) {
 clipHeightNew--;
 }
 clipWidthNew = clipHeightNew * ratio;
 }
 let viewPortClipWidth = clipWidthNew * (100 / document.body.clientWidth);
 let viewPortClipHeight = clipHeightNew / vwPixels;
 document.querySelector('.box .content').style.width = `${viewPortClipWidth}vw`;
 document.querySelector('.box .content').style.height = `${viewPortClipHeight}vw`;
}
 </script>
</body>
</html>

这样修改后，运行代码时goFull()会完美移除框架，让视频铺满屏幕宽度，同时不会影响页面上的其他元素。

内容的提问来源于stack exchange，提问作者Sara Ree