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

響應式 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;
}

嘗試一下 »