响应式网页设计 - 视频

使用宽度属性

如果width属性设置为 100%，视频播放器将响应并放大和缩小：

video {
width: 100%;
height: auto;
}

请注意，在上面的示例中，视频播放器可以放大到大于其原始大小。在许多情况下，更好的解决方案是使用max-width属性代替。

如果max-width属性设置为 100%，视频播放器将在必要时缩小，但永远不会放大到大于其原始大小：

video {
max-width: 100%;
height: auto;
}

我们想在示例网页中添加视频。视频将调整大小以始终占据所有可用空间：

video {
width: 100%;
height: auto;
}