css插入视频制动播放 |css垂直居中对齐代码

.video {
position: relative;
width: 640px;
height: 360px;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
}
.video:after {
content: "";
display: block;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-image: url("play-icon.png");
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.video.playing:after {
display: none;
}

上面的代码中，大家为视频容器添加了一个:before伪元素和一个:after伪元素，分别用来设置视频封面和播放按钮。当用户点击播放按钮时，大家使用JavaScript添加playing class，隐藏播放按钮，显示视频。

可以看到，使用CSS实现视频制动播放非常简单，只需要添加几行代码即可。如果你想要实现更复杂的视频效果，也可以结合JavaScript一起使用。