在網頁中加入視頻內容，可以使頁面更加生動，吸引更多用戶的關注。而點擊播放功能則能夠增加用戶與網頁的互動性，提升用戶體驗。本文將介紹如何使用 CSS 實現點擊播放視頻的效果。

.video-wrap {
position: relative;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 32px;
}
.video-wrap video {
width: 100%;
}
.video-wrap video:not(:focus) {
opacity: 0;
pointer-events:none;
}

首先，我們需要將視頻包裹在一個 div 容器中，設置其定位為 relative，方便后續的 absolute 定位。在容器的中央位置添加一個播放按鈕，通過絕對定位和居中方式來實現。注意，點擊播放按鈕需要添加 cursor 為 pointer。

接下來，我們需要設置視頻的樣式。初始狀態下，視頻元素的透明度為 0，禁止鼠標點擊操作。當我們點擊播放按鈕后，通過 JavaScript 代碼實現播放視頻的操作。為了保證交互效果，我們需要通過 CSS 代碼來讓視頻元素獲得焦點，否則點擊進度條或空白區域都會導致視頻暫停。因此需要給視頻元素添加 :focus 偽類樣式，讓其獲得焦點，實現視頻播放的交互效果。

總的來說，使用 CSS 實現點擊播放視頻的效果比較簡單，只需添加少量代碼即可。相信通過本文的介紹和示例，大家已經掌握了相關操作，可以在實際開發中靈活運用。