39

我有video一个div40% 的宽度。在 html 中，width="100%" height="auto"使视频消失。以像素为单位设置特定大小不适合div. 将 html 留空会使视频大小错误，并且两侧有黑条。

我已经尝试过大多数其他帖子中的建议，但似乎无法让它发挥作用。

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
4

6 回答 6

85
于 2016-08-30T09:21:30.913 回答
19

您必须使用丑陋的 !important 来覆盖视频的默认绝对定位：

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

完成后，海报图像将显示在视频之后，而不是在视频上方，因此您必须使用以下方法修复它：

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

请注意，它必须与您希望它很好地显示的视频具有相同的比例。

于 2013-11-13T11:44:03.537 回答
6

在视频标签的 HTML 中，将宽度和高度设置为自动。然后使用 CSS 将视频 ID 的宽度/高度设置为 100%。

将 width 和 height 属性设置为 auto 会使播放器像 div 一样工作，默认情况下没有尺寸。

于 2013-08-11T22:17:48.970 回答
4

这是我用来解决此问题的方法。首先删除视频对象上的任何大小声明。

将包含元素的位置属性设置为相对。

.video_container {
  position: relative;
}

将海报图像添加到包含元素，并将其宽度设置为 100%，将高度设置为自动。这将强制 div 将自身垂直调整为海报图像的高度（如果你做得对，它应该与你的视频大小相同）

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

现在将 .video-js 的位置设置为绝对，并将其高度和宽度设置为 100%。这将导致 .video-js 将自身缩放到海报图像的高度和宽度，海报图像将自身适当地缩放到包含的 div。

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

如果您使用 Zencoder 等服务从视频中动态获取缩略图以生成缩略图并允许用户上传视频，这将确保您的视频始终正确缩放，因为您可以从图像中获取垂直比例缩放的尺寸。

于 2014-02-24T14:04:44.557 回答
3 
  video[poster]{
    object-fit: fill;
}

为我做的

于 2017-07-28T08:35:43.197 回答
2

刚刚发现：http: //jsbin.com/idinaf/4/edit from here http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

希望这可以帮助某人。

编辑：IMO你应该用一些简单的CSS试试这个：

width: 100% !important;
height: auto !important;
于 2013-10-03T15:28:46.473 回答