在CSS中，我們可以使用object-fit屬性來設置視頻的比例和填充方式。object-fit屬性允許我們定義如何適應容器的大小，保持圖像的縱橫比，或者填充整個容器，這對于在響應式設計中使用視頻元素非常有用，因為它可以確保視頻在各種屏幕尺寸上都能正確顯示。

設置視頻比例

我們可以使用object-fit: cover;來確保視頻始終填充其容器，同時保持其原始縱橫比，這意味著視頻將根據(jù)其容器的大小進行縮放，但不會變形。

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

填充整個容器

如果我們想要視頻完全填充其容器，即使這意味著要裁剪視頻的某些部分，我們可以使用object-fit: fill;，這將使視頻盡可能大，同時保持其縱橫比，但可能會裁剪視頻的某些部分以適應容器。

video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

保持縱橫比

如果我們想要視頻保持其原始縱橫比，無論容器的大小如何，我們可以使用object-fit: contain;，這將確保視頻始終在容器內(nèi)，但可能會在容器的頂部或底部留下空白空間。

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

響應式設計

在響應式設計中，我們可能需要為不同的屏幕尺寸設置不同的視頻大小，這可以通過使用媒體查詢來實現(xiàn)，我們可以根據(jù)屏幕的大小來調(diào)整視頻的寬度和高度。

video {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 600px) {
  video {
    width: 100%;
    height: 500px;
  }
}

在這個例子中，視頻在寬度為600px以下的屏幕上將調(diào)整為500px的高度，這可以確保視頻在這些小屏幕上仍然可見，而不會超出容器的范圍。