div css制作网页视频
使用DIV和CSS制作网页视频
在网页中嵌入视频可以通过HTML5的<video>标签结合DIV和CSS实现，以下是一种常见的实现方式：
基本HTML结构
创建一个包含视频播放器的DIV容器，并使用<video>标签嵌入视频文件：
<div class="video-container">
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>基础CSS样式
为视频容器添加样式，确保视频在不同设备上适配：
.video-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
border-radius: 8px;
}
.video-container video {
width: 100%;
display: block;
border-radius: 4px;
}响应式设计
通过CSS媒体查询确保视频在不同屏幕尺寸下正常显示：
@media (max-width: 600px) {
.video-container {
padding: 10px;
}
}自定义控制栏样式
覆盖默认的视频控制栏样式（需配合JavaScript实现完整功能）：
video::-webkit-media-controls-panel {
background-color: #333;
}
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider {
filter: invert(1);
}添加封面图
通过CSS为视频添加封面图，增强用户体验：
.video-container {
position: relative;
}
.video-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('cover.jpg') no-repeat center;
background-size: cover;
z-index: 1;
}
.video-container video {
position: relative;
z-index: 2;
}悬停效果
为视频添加交互效果：
.video-container video:hover {
box-shadow: 0 0 15px rgba(0,0,0,0.2);
transform: scale(1.01);
transition: all 0.3s ease;
}全屏样式优化
优化视频全屏时的显示效果：
video:-webkit-full-screen {
width: 100%;
height: 100%;
border-radius: 0;
}通过以上方法可以创建出美观且功能完善的网页视频播放器。实际应用中可根据需求调整样式细节，或结合JavaScript实现更复杂的交互功能。
