HTML5实现圆形DIV内视频自适应铺满：无留白且播放不缩放

1. 修正HTML结构 #

原结构直接在div内放置<li>不符合语义，需用<ul>包裹列表项，同时给每个视频添加外层容器，用于实现圆形裁剪和渐变边框：

<ul class="Stories_line">
  <li>
    <div class="story-container">
      <video controls autoplay class="stories">
        <source src="video/Stories1.mp4" type="video/mp4">
        <source src="video/Stories1.webm" type="video/webm">
        <source src="video/Stories1.ogv" type="video/ogg">
        <object data="video/Stories1.swf" type="application/x-shockwave-flash">
          <param name="movie" value="video.swf">
        </object>
      </video>
    </div>
  </li>
  <!-- 可在此添加更多列表项 -->
</ul>

2. 调整CSS样式 #

通过外层容器实现圆形和渐变边框，利用object-fit: cover让视频自适应填充容器，同时避免播放控件导致的缩放问题：

.Stories_line {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
  padding-left: 0; /* 清除ul默认内边距 */
  list-style: none; /* 清除li默认圆点 */
}

.story-container {
  width: 130px;
  height: 130px;
  background: linear-gradient(#fff 0 0) padding-box, linear-gradient(to right, #9c20aa, #fb3570) border-box;
  border: 5px solid transparent;
  border-radius: 50%;
  overflow: hidden; /* 裁剪内部元素为圆形 */
  display: block;
}

.stories {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 视频自适应填充容器，保持比例且无留白 */
  display: block; /* 消除inline元素间隙 */
}

/* 可选：统一播放控件样式，避免不同浏览器的缩放差异 */
.stories::-webkit-media-controls {
  background-color: rgba(0,0,0,0.5);
}
.stories::-webkit-media-controls-play-button {
  filter: invert(1);
}

关键说明 #

• object-fit: cover：让视频保持原有比例，同时完全填充容器，横屏视频裁剪左右冗余部分，竖屏视频裁剪上下冗余部分，确保无留白。
• 外层容器裁剪：通过border-radius: 50%和overflow: hidden实现圆形显示，渐变边框放在外层容器，避免视频边框被裁剪。
• 结构修正：用<ul>包裹<li>符合HTML语义，避免布局异常。
• 播放控件处理：设置视频为块级元素，同时可选自定义控件样式，防止点击播放时播放器出现缩放偏移。

内容的提问来源于stack exchange，提问作者All Mighty