css 播放视频 |css使用伪元素制作图形

.video{
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

在上述代码中，大家创建了一个包含视频的div容器，并设置其padding-bottom值为56.25%。这是因为正常比例的视频宽高比为16:9，所以大家需要根据容器宽度计算出相应的高度，以保持视频比例不变。

然后，大家在该容器内嵌入一个iframe标签，并设置其宽度和高度为100%以充满整个容器。这样，大家就成功地将视频嵌入到网页中，实现了视频播放的效果。

当然，在实际应用中，大家还可以使用其他的CSS属性来美化视频播放器，例如设置边框、添加控制条、调整视频大小等等。总之，CSS的强大功能可以帮助大家实现更加丰富、炫酷的视频效果，为网页带来更多的乐趣。