響應式網頁設計 - 視頻

使用 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;
}

親自試一試