最新的Web开发教程
 

自适应网页设计 - 视频


使用width属性

如果width属性设置为100%,视频播放器将是敏感,放大和缩小:

video {
    width: 100%;
    height: auto;
}
试一试»

请注意,在上面的例子中,视频播放机可以扩展为比原来的大小更大。 更好的解决方案,在很多情况下,将使用max-width属性。


使用max-width属性

如果max-width属性被设置为100%时,视频播放器会缩小,如果它有,但从来没有扩展到比其原始尺寸较大:

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

视频添加到示例网页

我们希望在我们的例子网页添加视频。 该视频将被调整为总是占用所有的可用空间:

video {
    width: 100%;
    height: auto;
}
试一试»