div css制作网页视频

使用DIV和CSS制作网页视频

在网页中嵌入视频并利用DIV和CSS进行布局和样式控制，可以通过以下方法实现：

嵌入视频元素

使用HTML5的<video>标签嵌入视频，并为其添加CSS样式：

<div class="video-container">
    <video controls width="100%">
        <source src="video.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>
</div>

设置容器样式

通过CSS控制视频容器的布局和外观：

.video-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

响应式设计

确保视频在不同设备上都能正确显示：

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

自定义控制栏样式

如果需要自定义视频控制栏，可以通过CSS覆盖默认样式：

video::-webkit-media-controls-panel {
    background-color: #333;
}
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider {
    filter: invert(1);
}

添加覆盖层

在视频上添加文字或其他内容覆盖层：

<div class="video-container">
    <video controls width="100%">
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="video-overlay">
        <h3>视频标题</h3>
    </div>
</div>

.video-container {
    position: relative;
}
.video-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
}

视频背景效果

创建全屏视频背景效果：

<div class="video-background">
    <video autoplay muted loop>
        <source src="background.mp4" type="video/mp4">
    </video>
    <div class="content">
        <!-- 页面内容 -->
    </div>
</div>

.video-background {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}
.content {
    position: relative;
    z-index: 1;
    color: white;
}