html - 在图像中插入视频并保持响应

Question

我有一张和这张类似的图片

而且我想在其中插入一个视频并在减小屏幕尺寸时保持其比例。只有宽度需要响应，因为它将在移动设备上以纵向显示。

我不知道如何使用 CSS 来做到这一点。我尝试使用绝对位置和一些百分比，但是在调整大小时，比例并没有真正得到尊重，视频变得更小

标签： htmlcssimagevideoresponsive-design

Answer 1

如果您可以使用开源 HTML5 视频播放器 videoJS，它支持“流体”模式，允许您设置选择的宽高比以在视频调整大小时保持不变。

他们在此处提供了包括配置在内的详细信息：https ://docs.videojs.com/tutorial-layout.html

一个示例配置：

var player = videojs('vid2');

//Set fluid mode
player.fluid(true);

//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');

//Set UI to be responsive
player.responsive(true);