CSS是設計網頁中最為基礎和重要的一部分，它可以通過樣式和布局將頁面變得更加美觀和易于閱讀和導航。其中一個常見的問題就是關于視頻尺寸的調整

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

如果您想要在您的網頁上展示視頻，就需要了解如何用CSS來控制它周圍的容器，這樣才能使得視頻融入到您的網頁中，而不至于顯得冷冰冰的。正如上面的代碼所示，它可以使得您的視頻的寬度自適應并且可以根據不同的屏幕尺寸來做出相應的調整。如果您只設置寬度，而沒有設置高度，那么視頻在不同的屏幕上是會失真和拉伸的。

.video-container {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

如果您要嵌入一個來自YouTube或者Vimeo等視頻平臺的視頻，這時一個更復雜的例子就出現了。以上的代碼展示了如何使用CSS來呈現一個高度自適應而寬度固定的視頻。您需要在一個包含視頻的容器內部定義一個固定的寬度,使用一個padding-bottom屬性來定義視頻的高度。例如如果您需要16x9的比例，那么padding-bottom屬性應該被設置為56.25% (9/16*100%)。在上述代碼中，視頻的寬度會被強制設定為100%。這樣的話，當您的網頁調整到小于視頻寬度的屏幕尺寸時，視頻是可以進行相應縮小的，以適應網頁的大小。