Mediaelement.js视频如何填充包含框？

Question

我正在尝试将Mediaelement添加到我们的html视频播放中。我遇到了一个问题，我还没弄清楚如何处理，我想最好问一下。

在一个地方，视频标签位于灯箱内（确切地说是Colorbox）。直接html5视频尊重lighbox的大小。它填充可用空间，然后适合这个空间内的实际视频帧，留下空的“信装箱”，其中视频和灯箱的宽高比不同。

这有意义吗？换句话说，它使视频尽可能大，而不会剪切它的任何部分。

我希望Mediaelement能够做同样的事情，但它会做一些与众不同的事情。 Mediaelement每次填充宽度。只要灯箱比视频宽屏幕，这就会导致视频被剪裁。该视频还可以滚动查看视频的底部和控件部分。

我尝试了一些基本的css覆盖，使用宽度和高度选项。我也改变了选项 enableAutosize 而没有看到任何区别。看起来所有动态添加的html的大小都是由Javascript确定的。

是否有支持的或预期的方式来获取我在没有扩展或黑客攻击Mediaelement javascript的结果？

我应该补充一点，视频内容的尺寸各不相同，灯箱也是动态大小的。

$("a.cbox_group").colorbox({
  rel:'cbox_group',
  scalePhotos:true,
  transition:"none",
  width:"99%",
  height:"99%",
  maxWidth:"90%",
  maxHeight:"100%",
});


$('video').mediaelementplayer({
  loop: true,
  enableAutosize: true,
  features: ['playpause','progress','current','duration','fullscreen'],
  alwaysShowControls: true,
  pauseOtherPlayers: true,
});

Colorbox设置为占用大部分浏览器窗口。它有一个功能，可以将内容的大小调整为“框” scalePhotos：true 。这设置了右侧和高度，适用于图像和原始视频标签。

如果Mediaelement找到了这个，它将做自己的事情并使播放器以16：9的方式显示，内容看起来是1：1像素比例。

如果我确保没有设置，请将其保留。如果视频元素没有大小属性​​，则Mediaelement将使用 enableAutosize：true 启动并填充，并可能导致垂直滚动和控件不在视野范围内。

在线“测试用例”

我设法提取了一些静态html来说明我遇到的问题。一个页面，其中的链接打开了一个颜色框弹出窗口，其中包含我在应用程序中使用的设置。我将媒体元素javascript设置为2s延迟，以便在媒体元素接管之前观察原始视频元素。

我想要的是找到一些设置组合，这些设置允许与原始视频标签相同的基本“布局”（剪辑既不高度也不宽度），但具有媒体元素控件和自动回退以及所有其余设置。

Example test page

Source on Github

使浏览器非常宽屏以使其显而易见。