css底部制作视频

使用CSS固定底部视频

在网页底部固定视频播放器，可以通过CSS的position: fixed属性实现。将视频容器定位在视窗底部，并设置宽度和高度。

.video-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: #000;
  z-index: 1000;
}

响应式底部视频布局

通过媒体查询调整视频尺寸，确保在不同设备上正常显示。小屏幕设备可能需要全屏或调整高度。

@media (max-width: 768px) {
  .video-player {
    height: 80px;
  }
}

视频播放器样式优化

为视频播放器添加控件样式和悬停效果，提升用户体验。自定义播放按钮和进度条的外观。

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}

滚动时隐藏/显示底部视频

通过JavaScript和CSS结合，实现滚动时自动隐藏视频，停止滚动后显示。添加过渡效果使动画更平滑。

.video-player.hide {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.video-player.show {
  transform: translateY(0);
  transition: transform 0.3s ease;
}

底部视频与其他内容的间距处理

确保页面主体内容不会被底部视频遮挡，通过添加padding-bottom或margin-bottom预留空间。

.main-content {
  padding-bottom: 140px; /* 视频高度 + 额外间距 */
}