可拖拽缩放Video无法填满父div的问题解决咨询

我懂你遇到的困扰——当拖拽调整那个绿色父div的大小时，video总是没法完全填满容器，露出背景色。这大概率是因为video本身的默认样式、video-js的内置样式干扰，或者没有给容器和video设置正确的尺寸同步规则。下面是几个关键修改点，帮你搞定这个问题：

核心修改方案 #

1. 优化CSS样式，强制video填充容器 #

先给父容器和video元素添加更严谨的布局规则，覆盖默认样式：

.my-div { 
  width: 320px; 
  height: 240px; 
  top: 200px; 
  left: 400px; 
  position:absolute; 
  z-index: 9; 
  background-color: #28a745; 
  overflow: hidden; /* 防止video内容溢出容器 */
  box-sizing: border-box; /* 确保容器的边框/内边距不挤占内容空间 */
  display: flex; /* 让子元素自动填充整个容器 */
}

/* 强制video填满父容器，覆盖video-js的默认样式 */
.my-div video {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill; /* 可选：按容器尺寸拉伸适配；要保持比例用cover/contain */
  flex: 1; /* 配合flex布局自动占满剩余空间 */
}

2. 调整JS代码，移除冲突的尺寸属性 #

JS里不用手动给video设置width和height属性，交给CSS控制更可靠，避免和video-js的样式冲突：

let video_div = document.createElement('div');
video_div.id = 'video-div'
$(video_div).addClass('my-div')
$("body").append(($(video_div).draggable().resizable()))
let video_element;
video_element = document.createElement('video');
$(video_element).attr('id', 'my_video');
$(video_element).attr('class', 'video-js vjs-default-skin');
// 移除这里的width、height属性，由CSS统一控制
$(video_element).attr('controls', '');
$(video_element).attr('preload', 'auto');
$(video_element).attr('data-setup', '{}');
let source = document.createElement('source');
$(source).attr('type', "video/mp4");
$(source).attr('src', "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4");
$(video_div).append(video_element)
$(video_element).append(source);

为什么这样修改？ #

• flex布局：父容器用display: flex后，子元素video会自动填充整个容器空间，不用额外写复杂的定位规则。
• !important权重：video-js库会给video元素自带一些宽高样式，用!important能确保我们的填充规则优先级更高。
• object-fit属性：根据你的需求选择：
  • fill：强制video拉伸到容器尺寸，可能会变形，但能完全填满
  • cover：保持视频比例，填满容器，超出部分自动裁剪
  • contain：保持视频比例完整显示，可能会留空白（不适合你的需求）
• 移除JS中的尺寸属性：手动设置的width="100%"和height="100%"有时候会和CSS规则冲突，而且CSS控制更灵活。

如果还是有问题，可以试试在video的data-setup里添加{"fluid": false}，禁用video-js的自适应流体布局，避免和resizable功能冲突：

$(video_element).attr('data-setup', '{"fluid": false}');

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