当前位置：首页 > CSS

div css制作网页视频

2026-01-16 09:22:00CSS

使用HTML5和CSS嵌入视频

在网页中嵌入视频可以通过HTML5的<video>标签实现，结合CSS进行样式控制。以下是一个基础示例：

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

video {
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: block;
  margin: 20px auto;
}

响应式视频设计

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

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9宽高比 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

自定义视频控件样式

覆盖默认的视频控件样式：

video::-webkit-media-controls-panel {
  background-color: #f5f5f5;
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider {
  filter: invert(75%);
}

视频背景效果

创建全屏视频背景：

<div class="video-background">
  <video autoplay muted loop>
    <source src="background.mp4" type="video/mp4">
  </video>
  <div class="content">
    <h1>页面标题</h1>
  </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;
  text-align: center;
  padding-top: 20vh;
}

视频悬停效果

添加交互效果：

.video-hover {
  transition: all 0.3s ease;
}

.video-hover:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

视频封面图设置

在视频加载前显示封面图：

<video poster="cover.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

视频自动播放注意事项

自动播放视频需要添加muted属性：

<video autoplay muted loop>
  <source src="video.mp4" type="video/mp4">
</video>

跨浏览器视频支持

提供多种视频格式确保兼容性：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

div css制作网页视频