css中怎么给video播放

CSS中，我们可以给video播放器添加自定义样式，让它看起来更加美观、符合网站的风格。下面就来介绍几种常用的方式。

/* 给video添加样式 */

video {
    width: 100%; /* 设置宽度为100% */
    max-width: 800px; /* 设置最大宽度为800px */
    height: auto; /* 高度自适应 */
    display: block; /* 设置为块级元素 */
    margin: 0 auto; /* 居中显示 */
} 

上面的CSS代码，可以让video播放器宽度自适应，并且最大宽度为800px。同时，为了让它居中显示，设置了margin为0 auto。

此外，还可以通过添加一些特效，让video播放器更加美观。例如：

/* 给video添加特效 */

video {
    border: 1px solid #ddd; /* 添加边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
} 

上面的CSS代码，可以让video播放器添加一个浅灰色的边框，并且在播放器下方添加了一个浅阴影效果。

除了可以给整个video播放器添加样式，还可以单独设置video标签中的一些属性，例如：

/* 设置video标签属性 */

video::-webkit-media-controls {
    display:none!important;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden!important;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px)!important;
    margin-left:-15px!important;
} 

上面的CSS代码，可以通过修改video标签中的webkit-media-controls属性，来控制video控制条的样式和行为。这样就可以自定义video播放器的外观和功能。

总之，CSS可以让我们轻松地自定义video播放器的样式，同时添加一些特效和控制器，来使其更加美观和易用。