::backdrop伪元素控制video的背景实例页面

回到相关文章 »

效果：

视频全屏

原视频比例16:9，若你的显示器也是这个比例，请F12打开开发者工具控制台再全屏

代码：

CSS代码：

/* 给全屏时候视频背景加个透明 */
video::backdrop {
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

HTML代码：

<video src="./fish.mp4" width="480" height="270" controls></video>