在現代網頁設計中，視頻的使用越來越頻繁。但是，直接將視頻嵌入頁面中可能會導致頁面加載速度變慢，特別是對于大型視頻文件或者訪問速度較慢的設備來講。因此，我們需要一種方式來預覽視頻，同時避免不適當的帶寬消耗。

CSS提供了一種非常簡單的方法來預覽視頻，這也是我們今天要講的主題。我們可以在HTML中加入視頻縮略圖，并使用CSS來控制預覽。下面是這個簡單的CSS代碼：

.video-thumbnail {
position: relative;
display: inline-block;
width: 320px;
height: 240px;
background: url('thumbnail.jpg') no-repeat;
background-size: cover;
cursor: pointer;
overflow: hidden;
transition: all .3s ease;
}
.video-thumbnail:hover .play-overlay {
opacity: 1;
}
.video-thumbnail:hover img {
transform: scale(1.1);
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: url('play.png') no-repeat;
background-size: cover;
opacity: 0;
transition: all .3s ease;
z-index: 1;
}
img {
display: block;
width: 100%;
height: 100%;
transition: all .3s ease;
}

這段代碼展示了如何使用CSS來創建帶視頻預覽的縮略圖。我們首先創建一個div元素，作為縮略圖，并在其中嵌入一個img元素，用于展示視頻縮略圖。我們還在div中添加了一個play-overlay元素，用于在縮略圖上方顯示播放按鈕。

隨著鼠標懸停在縮略圖上，我們使用CSS過渡效果展示播放按鈕，同時縮小圖片元素到一個比正常大小稍大的尺寸。當視頻預覽結束后，我們可以直接用鏈接或播放器嵌入播放器來展示完整視頻。

總之，使用CSS實現視頻預覽可以為網站帶來許多好處，包括縮短頁面加載時間、提高用戶體驗等。我們在使用時應該注意尺寸和格式，以便頁面性能達到最佳水平。