Html 视频容器div上的Safari 11 css缩放使视频控件太小
我有一个DOM结构，带有一个视频元素和一个比屏幕大的容器，为了使它适合屏幕（不改变其尺寸），我对其进行了一些缩放，发现通过应用css缩放进行缩小会使视频控件比视频本身小 在safari 11.x中加载此文件时，您可以在此处看到问题Html 视频容器div上的Safari 11 css缩放使视频控件太小,html,ios,css,safari,osx-elcapitan,Html,Ios,Css,Safari,Osx Elcapitan,我有一个DOM结构，带有一个视频元素和一个比屏幕大的容器，为了使它适合屏幕（不改变其尺寸），我对其进行了一些缩放，发现通过应用css缩放进行缩小会使视频控件比视频本身小 在safari 11.x中加载此文件时，您可以在此处看到问题 <div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
<div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
<video src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
id="video" class="video" autoplay muted controls playsinline preload="auto"
style="width: 100%; height: auto">
</video>
</div>
任何解决方案或修复方案都将受到欢迎我遇到了同样的问题。这似乎发生在Safari 11中，但不会发生在Safari 9或更早的版本中。这是我使用的解决方法 我对视频元素本身应用了一个“未缩放”类，将其放大到原始大小，然后使用宽度和高度将其缩小。这样，视频容器中的其余内容将保持缩放，但视频控件的大小是适当的 在HTML中，将“unscaled”类添加到视频中，并删除高度和宽度
<div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
<video class="unscaled" src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
id="video" class="video" autoplay muted controls playsinline preload="auto">
</video>
</div>
我遇到了同样的问题。这似乎发生在Safari 11中，但不会发生在Safari 9或更早的版本中。这是我使用的解决方法 我对视频元素本身应用了一个“未缩放”类，将其放大到原始大小，然后使用宽度和高度将其缩小。这样，视频容器中的其余内容将保持缩放，但视频控件的大小是适当的 在HTML中，将“unscaled”类添加到视频中，并删除高度和宽度
<div id="video-container" style="width: 600px; height: 335px; position:relative; transform:scale(0.5); transform-origin:0% 0%">
<video class="unscaled" src="https://iabtechlab.com/wp-content/uploads/2017/12/VAST-4.0-Short-Intro-low-resolution.mp4"
id="video" class="video" autoplay muted controls playsinline preload="auto">
</video>
</div>
我真的不明白你为什么要这么做。为什么不将宽度和高度设置为正确的大小？您可能不想看到我在
video container视频容器的尺寸video container视频容器的尺寸