在網頁設計中，視頻是一個非常重要的元素。它可以幫助我們展示一些動態的內容或者重點介紹產品的特點。在此我們將探討如何通過CSS來美化視頻。

.video {
display: block;
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
overflow: hidden;
}
.video iframe, .video object, .video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

首先，我們需要在HTML中創建一個具有.video類的元素，并插入嵌入的視頻。加入這個類，是為了讓我們能夠使用CSS來改變元素的樣式和布局。

接下來，我們需要構建一個支持響應式布局的外部容器。上面的代碼使用了padding-bottom屬性，為了使視頻元素的長寬比得以保持。通過在視頻容器上設置padding-bottom的百分比，我們可以確保容器的高度始終與容器的寬度成同樣的比例。因此，如果我們希望元素是16:9的比例，我們會設置padding-bottom為56.25%（9/16 * 100%）。

現在，我們需要設置視頻的高度和寬度。我們可以使用CSS相對單位，例如百分比或視窗單位，在不同大小的屏幕上創建一個相對一致的布局。我們已經使用padding-bottom屬性創建了容器高度的占位符，為了使嵌入的視頻適應容器尺寸，我們設置視頻元素的寬度和高度為100%。

最后，我們要絕對定位視頻元素，使其覆蓋在視頻容器的上方。我們使用position屬性對視頻進行定位，并使用top和left屬性對其進行定位。這使視頻元素始終保持在容器的左上角。此外，我們使用了position屬性值relative的父元素.video容器，來讓子元素.video進行絕對定位的相對參照。