CSS樣式視頻循環播放是一個實用技巧，在網站制作中可以用來向用戶展示產品、服務等，提高交互性和吸引力。這篇文章將介紹如何使用CSS來實現視頻循環播放，讓你的網站更加生動。

/* CSS代碼 */
video.loop {
width: 100%;
height: auto;
object-fit: cover;
position: absolute;
top: 0; left: 0;
z-index: -1;
}
section {
position: relative;
height: 100vh;
}

代碼解析：

首先，我們需要在HTML中使用<video>標簽來嵌入視頻文件：

<video class="loop" autoplay muted loop>
<source src="yourvideo.mp4" type="video/mp4">
</video>

這里我們將視頻添加了一個class屬性loop，以便CSS代碼調用。

然后，我們使用CSS的position屬性將<video>元素設置為絕對定位，并將其放在<section>元素的背景下。注意設置z-index為-1，這樣視頻不會遮蓋其它內容。

section {
position: relative;
height: 100vh;
}

最后，我們加上以下CSS樣式實現視頻循環播放效果：

video.loop {
width: 100%;
height: auto;
object-fit: cover;
position: absolute;
top: 0; left: 0;
z-index: -1;
}

這樣，你的網站就可以實現視頻的循環播放效果了。

總結：

使用CSS樣式播放視頻是一個非常簡單實用的技巧，可以為網站增加吸引力和娛樂性。通過位置和CSS屬性設置，我們可以很容易地實現網站背景視頻的循環播放效果。