如何使用JavaScript/jQuery根据父DIV尺寸调整两个视频元素大小

你的需求完全可以通过JavaScript实现，主要需要修改原有CSS的高优先级规则，搭配动态样式调整即可完成效果：

修改后的完整代码 #

CSS 部分 #

#container {
  width: 800px;
  height: 400px;
  border: 1px solid red;
  display: flex;
  align-items: center;
}
video {
  height: 100%;
  object-fit: cover;
}

JS 部分 #

function add_video() {
  // 先判断是否已经存在第二个视频，避免重复添加
  if(document.getElementById("second_video")) return;
  // 创建第二个视频元素
  var videoelement = document.createElement("video");
  videoelement.setAttribute("id", "second_video");
  videoelement.setAttribute("controls", "controls");
  var sourceMP4 = document.createElement("source");
  sourceMP4.type = "video/mp4";
  sourceMP4.src = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";
  videoelement.appendChild(sourceMP4);
  document.getElementById("container").appendChild(videoelement);
  // 调整两个视频宽度各占50%
  document.getElementById("firstvideo").style.width = "50%";
  videoelement.style.width = "50%";
}
function delete_video() {
  var myEle = document.getElementById("second_video");
  if (myEle) {
    myEle.remove();
    // 恢复第一个视频占满全宽
    document.getElementById("firstvideo").style.width = "100%";
  }
}

HTML 部分（原有逻辑不变即可） #

<div id="container">
  <video id="firstvideo" controls="controls">
    <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
  </video>
</div>
<div id="buttons">
  <button id="add_video" onclick="add_video()">Add</button>
  <button id="delete_video" onclick="delete_video()">delete</button>
</div>

核心修改说明 #

• 删掉了原有CSS中video#firstvideo的绝对定位和!important高优先级声明，避免JavaScript动态设置的样式被覆盖
• 给父容器#container添加flex布局，子元素自动适配容器高度
• 新增重复添加校验，避免多次点击Add按钮重复插入第二个视频
• 增删视频时动态修改视频的宽度属性，实现自动适配容器的效果

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