Latest web development tutorials

響應式Web 設計– 視頻(Video)

使用width 屬性

如果width 屬性設置為100%,視頻播放器會根據屏幕大小自動調整比例:

實例

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

嘗試一下»

注意在以上實例中,視頻播放器根據屏幕大小自動調整比例,且可以比原始尺寸大。 更多情況下我們可以使用max-width 屬性來替代。


使用max-width 屬性

如果max-width 屬性設置為100%, 視頻播放器會根據屏幕自動調整比例,但不會超過其原始大小:

實例

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

嘗試一下»

在網頁中添加視頻

我們可以在網頁中添加視頻。 以下實例視頻根據div 區域大小自動調整併佔滿整個div 區域:

實例

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

嘗試一下»