最新的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;
}
試一試»