Css 如何在双引导列设置中缩小或适应移动设备上的视频？

我在Bootstrap 4中有两列，一列有视频，另一列有文本或其他类型的内容：

#视频元内容{
宽度：100%；
高度：500px；
保证金：0；
填充：0；
边框：3倍纯色灰色；
}

您的浏览器不支持视频

这里没有几段文字

除了现有类之外，还要添加类col-xs-4、col-xs-8、col-xs-12。col xs-*适用于移动设备等小型设备

使视频适应可用宽度的关键是添加以下css行：

video {
    max-width: 100%;
}

这会将视频限制在其容器的宽度内，而高度会自动调整以保持纵横比。视频永远不会超过其实际大小（

1920px

，在下面的示例中），因此，如果

#vidcontainer

的宽度小于视频，视频将约束自己到该宽度，如果

#vidcontainer

更大，则视频将是其通常的大小

您可以通过将下面的堆栈代码段放入整个页面并更改浏览器窗口的宽度来看到这一点

#视频元内容{
宽度：100%；
高度：500px；
保证金：0；
填充：0；
边框：3倍纯色灰色；
}
录像带{
最大宽度：100%；
}

您的浏览器不支持视频

这里没有几段文字

在“col-sm-8”和“col-sm-8”之外添加“col”类。 例如

---

通过使用“.col”引导自动处理布局。

当我阅读时，有人在这里发布了详细的答案，该答案已被删除。请重新发布伟大的解决方案，只是一点小小的更改就解决了所有设备类型的所有问题！谢谢你的解释！不用担心，很高兴我能帮忙。

class="col col-sm-8"
class="col col-sm-4"