視頻在網頁設計中有很多應用，但有時候直接使用HTML標簽加載視頻不方便，因為需要使用第三方插件的支持，加大了網頁加載的時間，而且插件也不是所有設備都支持。那么如何將視頻放在CSS中呢？下面我們具體解析一下步驟。

.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
/*設置元素在原來位置的高寬比（即16：9）*/
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

首先，我們需要創建一個容器，設置其寬度為100%，高度比16：9要小，這樣可以保證視頻在不同大小的屏幕上都能正常顯示，這里我們通過padding-bottom屬性實現高度的設置。接下來，我們需要在容器內部插入一個video標簽，設置其位置為絕對定位，寬度和高度都為100%。這樣我們就可以在CSS中成功地加載視頻了。

然后我們需要寫入video標簽的具體信息，如下：

這段代碼中，source標簽用于指定視頻文件的路徑和格式，可以在標簽中增加多個不同格式的視頻鏈接，瀏覽器會選擇支持的格式來自動播放視頻。當然，如果瀏覽器不支持HTML5視頻，將會顯示出自定義的文本，這個信息可以自己定義。

最后，在CSS代碼最后調用視頻容器，代碼如下：

.video-container .video {
object-fit: cover;
}

這里我們使用CSS的object-fit屬性來保證視頻在容器中的表現樣式，這個屬性控制元素級別的對象內容何如填充容器。

以上就是將視頻放入CSS的具體步驟，相信通過上述的完整代碼，你也已經可以輕松地在網頁設計中實現對視頻的支持了。