生成一個CSS視頻自動全屏播放效果，是一個非常有用的技能，特別是在網(wǎng)站上使用視頻背景的情況下。讓我們看看如何使用CSS將視頻全屏播放。

.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

這里有兩個類; ‘ videoWrapper '類是帶有百分比填充的外層包裝器，’ iframe '，’ object '或‘嵌入’元素為內容。當你將嵌入式視頻放在這個容器中時，它將適應容器的大小，并在其中心居中。這時候，只需要將視頻的寬度和高度設為100%，就可以將視頻全屏播放。

你可以像下面這樣使用這個代碼：

這里我用了YouTube視頻鏈接，您可以使用任何視頻鏈接替換成您需要使用的網(wǎng)站的鏈接，只要將其替換到iframe的SRC屬性中即可。

這是一個非常簡單的方法來實現(xiàn)全屏視頻效果，并且可以通過添加一些其他樣式來進行擴展和自定義。