CSS是網頁開發中不可或缺的一部分。當我們想要添加視頻或音頻播放器時，CSS可以讓我們自定義播放器的樣式，使其更符合我們的網站風格。

.video-player {
width: 640px;
height: 360px;
background-color: #000;
position: relative;
}
.video-player video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-player .controls {
position: absolute;
width: 100%;
height: 40px;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
}
.video-player .play-btn {
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.video-player .play-btn:hover {
background-color: #ccc;
}
.video-player .play-btn i {
font-size: 20px;
color: #000;
font-weight: bold;
}

以上是一個簡單的視頻播放器的CSS樣式代碼。其中，video-player類用于包含整個播放器，包括video和控制條。在.video-player中，我們設置了寬度和高度，并設置背景色為#000，這樣視頻在沒有加載時會顯示黑色。

在.video-player video中，我們將video的寬度和高度設置為100%，這樣視頻會根據容器自適應寬度和高度，并將object-fit設置為cover，這樣視頻會自動填充整個容器。

在.video-player .controls中，我們設置了控制條的樣式，將其定位在視頻的底部，并設置了高度、背景色以及對齊方式。我們還在控制條中添加了一個播放按鈕，當用戶點擊這個按鈕時，視頻會開始播放或暫停。該按鈕的樣式可以通過 .video-player .play-btn的樣式進行自定義，包括寬度、高度、背景色、圓角等。