[分享]css中怎么把视频写上去

CSS 是一种用于网页样式设计的语言，其中，通过添加 video 标签，可以在网页上嵌入视频。但是，如何在 CSS 中精确地控制视频的位置和大小呢？以下是一个通过 CSS 将视频嵌入网页中来的示例代码...

CSS 是一种用于网页样式设计的语言，其中，通过添加 video 标签，可以在网页上嵌入视频。但是，如何在 CSS 中精确地控制视频的位置和大小呢？以下是一个通过 CSS 将视频嵌入网页中来的示例代码。

<div class="video-container">
  <video src="example.mp4" controls autoplay preload="metadata"></video>
</div>

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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

上述代码中，我们首先创建了一个外部容器，使用相对定位为内部视频设置绝对定位，并通过 padding-bottom 属性为容器创建了一个固定的纵横比比例。

这里的 padding-bottom 值为 56.25% 对应的纵横比例为 16:9，换句话说，这意味着我们的视频始终保持在适当的比例，无论网页显示尺寸如何改变。

在视频标签中，我们指定了一个示例视频作为 src，使用 preload 属性预加载视频元数据以确保流畅的视频播放。它还包含控制按钮和 autoplay 属性，使视频在加载后自动播放。

最后，在 CSS 中，我们将 .video-container 容器设置为相对定位，并将内部 video 视频元素的位置设置为绝对定位，并将其大小设置为 100％。 这使得视频完全填满其父级 .video-container 容器。 通过以上设置，我们可以实现一个自适应的视频嵌入页面的样式。