如何仅用CSS实现类似Skype的HTML5 video元素悬浮效果？

完全不用JavaScript，只靠CSS的定位属性就能轻松做出类似Skype的画中画视频布局。下面是具体的实现方案：

第一步：HTML结构 #

首先需要一个父容器来包裹两个视频元素，这样我们可以基于父容器来定位小视频：

<div class="video-container">
  <video class="main-video" src="你的主视频地址" autoplay muted playsinline></video>
  <video class="pip-video" src="你的小视频地址" autoplay muted playsinline></video>
</div>

这里给两个视频加了autoplay、muted和playsinline属性，是为了让视频在现代浏览器里能正常自动播放（浏览器通常要求静音才能触发自动播放逻辑）。

第二步：CSS核心样式 #

关键是利用相对定位+绝对定位来实现悬浮效果：

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* 可根据需求调整主容器最大宽度 */
  aspect-ratio: 16/9; /* 用宽高比代替固定高度，保持视频比例更灵活 */
  overflow: hidden;
  border-radius: 8px;
}

.main-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让视频铺满容器，同时保持比例，避免拉伸变形 */
}

.pip-video {
  position: absolute;
  /* 定位到右下角，可改成top/left切换到其他角落 */
  bottom: 1rem;
  right: 1rem;
  width: 200px; /* 小视频宽度，也可用百分比如25%实现响应式 */
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 加阴影增强层次感，更贴近Skype风格 */
  z-index: 10; /* 确保小视频始终在主视频上方 */
}

额外优化建议 #

• 响应式适配：把小视频宽度改成width: 25%; max-width: 200px;，这样在小屏幕上不会占用过多空间。
• 交互增强：可以给小视频加cursor: pointer;，如果后续需要切换主次视频，只需要少量JS配合，布局本身仍保持纯CSS实现。
• 兼容性：这套方案支持所有现代浏览器（Chrome、Firefox、Safari、Edge），完全满足日常场景需求。

内容的提问来源于stack exchange，提问作者Voltaire John Secondes Biton