如何使用JavaScript在id为video的div中添加全宽video标签

实现全宽度video标签的修改方案 #

你现有代码中给video设置了固定320px宽度，无法铺满父容器，修改如下即可实现需求：

修改后的JavaScript代码

let video = document.createElement("video")
// 移除固定宽高配置，用样式控制占满父容器宽度
video.style.width = "100%";
// 固定16:9宽高比，也可根据需求调整或移除让高度自适应
video.style.aspectRatio = "16/9";
video.style.background = "black";
// 消除行内块默认底部空隙，可选配置
video.style.display = "block";
// 若需要视频内容铺满标签不出现黑边，可添加下面这行
// video.style.objectFit = "cover";
document.getElementById("video").append(video);

可选HTML调整（若需要占满整个页面宽度）

如果需要video铺满整个视口宽度，可以给父元素和body添加对应样式消除默认边距：

<html>
    <body style="background: lightgrey; margin: 0;">
        <div class="container" style="width: 100%; padding: 0;">
            <div id="video" style="width: 100%;"></div>
        </div>
    </body>
</html>

核心说明

• 不要使用固定width/height属性限制video尺寸，用width:100%可以让标签自动适配父容器的宽度
• aspect-ratio属性可以固定宽高比，避免视频拉伸变形
• object-fit可以控制视频源在标签内的填充方式，按需配置即可

内容的提问来源于stack exchange，提问作者Yoshida Atsushi