視頻播放器是當今互聯網上非常常見的一種媒體展示形式，可以在網頁上快速播放視頻內容，并且可以通過css來美化設計，增加視覺效果，讓觀眾更加喜歡。css樣式可以控制視頻播放器的外觀和交互，使其更加好看而且更加易用。

.video-player {
	position: relative;
	display: block;
	width: 400px;
	height: 225px;
	background-color: #000000;
	border: solid 5px #ffffff;
}
.video-player video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-player .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background-color: #ff0000;
	color: #ffffff;
	border: none;
	border-radius: 50%;
	font-size: 30px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
}
.video-player .play-button:hover {
	background-color: #ffffff;
	color: #ff0000;
}
.video-player .play-button:active {
	background-color: #555555;
	color: #ffffff;
}

代碼中的.video-player是包裹視頻播放器的大容器，設置了寬度和高度，并且增加了邊框樣式。視頻播放器使用了<video>標簽，設置了絕對定位，使其覆蓋在容器上面，這樣可以控制視頻的尺寸和位置。按鈕使用<button>標簽，使用絕對定位放置在屏幕中心，增加了紅色的背景和白色的文字，鼠標移動和點擊時會有不同的背景顏色，增加了交互性和視覺效果。