可调整大小的视频不完全适合父 div

Question

我有一个可拖动且可调整大小的视频元素。我希望视频元素在调整大小时能够 100% 适合父 div，但这是我未能做到的地方。

这是我到目前为止所拥有的：

CSS

.my-div

{

    width: 320px;

    height: 240px;

    top: 200px;

    left: 400px;

    position:absolute;

    z-index: 9;

    background-color: #28a745;

}  

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');

$(video_element).attr('width', '100%');

$(video_element).attr('height', '100%');

$(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);

如果您尝试调整视频大小，它不适合父 div（绿色背景出现在后面）

我该如何修改我的代码来实现这一目标？

Answer 1

默认情况下，视频标签尝试保持视频宽高比。如果你想填充你的parent，你必须使用CSS属性“object-fit”在您的代码中，尝试添加video_element.style.objectFit = "fill";或者，使用 JQuery：$(video_element).css("object-fit", "fill");当然，这样做并不能保证视频的完美宽高比。

Answer 2

将 % 添加到周围名为 .my-div 的 div 的高度（在该视频中它是 56.25%）。如果更改宽度，高度始终为高度的 56.25%，并且视频应该适合。