容器内的HTML视频错误控制webkit中的大小

Question

与此问题的关系：Video controls have wrong size in Safari iOS

与Chrome相同的问题（目前使用的是适用于Mac的62版），如果将转换应用于容器或视频本身，实际上会显示不同（错误）的结果。

示例代码和小提琴：

<style>
#div1, #vid2 {
  transform:scale(0.25, 0.25);
}
</style>

<div id="div1">
<video width="560" height="322" id="vid1" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video>
</div>

<div id="div2">
<video width="560" height="322" id="vid2" src="http://techslides.com/demos/sample-videos/small.mp4" controls ></video>
</div>

https://jsfiddle.net/julifos/z45xz63w/38/

mp4和webm视频似乎相同。任何帮助将不胜感激！

好奇心：控件的大小似乎取决于浏览器窗口的大小（使用不同的窗口大小运行相同的小提琴）。

Answer 1

设置宽度尺寸并将高度尺寸留为空白将解决此问题。发生这种情况的原因是，如果您设置了两个尺寸，并且实际视频尺寸不相同，它将使用一个尺寸缩放到最接近的适当比例，从而在视频播放器的唯一一个尺寸上留有空白。视频可以在水平或垂直位置居中放置，两侧各有空白。

来自：Control bar wider than video in html5 + css