当前位置：首页 > CSS

css制作视频标签

2026-03-12 05:00:54CSS

使用HTML5 `<video>` 标签嵌入视频

通过HTML5的<video>标签可以直接在网页中嵌入视频，配合CSS实现自定义样式。

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

通过CSS调整视频尺寸、边框或阴影：

css制作视频标签

video {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

自定义视频控制栏样式

默认控制栏可通过伪元素和CSS属性调整。隐藏默认控件后，可用JavaScript实现自定义控件：

<video id="custom-video" width="400">
  <source src="video.mp4" type="video/m4">
</video>
<div class="custom-controls">
  <button class="play-btn">Play</button>
  <input type="range" class="progress-bar">
</div>

.custom-controls {
  display: flex;
  align-items: center;
  background: #f0f0f0;
  padding: 8px;
}
.play-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
}
.progress-bar {
  flex-grow: 1;
  margin-left: 10px;
}

响应式视频布局

使用CSS确保视频在不同设备上适配：

css制作视频标签

.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%;
}

添加悬停效果

通过CSS增强交互体验，例如悬停时放大或显示控件：

video:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}
.custom-controls {
  opacity: 0;
  transition: opacity 0.3s;
}
video:hover + .custom-controls {
  opacity: 1;
}

使用伪元素添加装饰

通过::before或::after为视频标签添加装饰性元素：

.video-wrapper {
  position: relative;
}
.video-wrapper::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: white;
  opacity: 0.7;
}