在網頁設計和開發中，視頻遮罩是一種非常常見的設計元素，可以幫助我們更好地選中視頻并以更好的方式呈現它。使用CSS中的視頻遮罩需要三個步驟。

第一步是創建一個包裹視頻的 div，為其添加適當的高度和寬度，來適應視頻的大小。同時需要為 div 添加 position: relative 樣式，以便它成為遮罩層的“父層”。

<div class="video-wrapper">
<!-- 在這里嵌入您的視頻代碼 -->
</div>
.video-wrapper {
width: 100%;
height: 0;
position: relative;
padding-bottom: 56.25%; /* 視頻比例 16:9 的百分比 */
}

第二步是在 div 中創建一個遮罩層，用來覆蓋整個視頻和它的控件。可以使用偽元素 ::before 或 ::after 來實現這個效果。在遮罩層上添加透明度、顏色和合適的寬度和高度能夠使遮罩層達到效果。

.video-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

第三步是改變視頻樣式，將視頻從遮罩層中顯示出來。可以使用 CSS transform 屬性為其加上偏移量，使其位于正確的位置。需要設置 position: absolute 來避免視頻尺寸大小的問題。

.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 自適應布局 */
transform: translate(0, 0);
}

通過以上的步驟，就可以用 CSS 實現視頻遮罩效果了。但是請記得，這只是其中的一種方法。對于不同的項目和場景，還需要根據具體情況加以調整和適配。