如何在html css上制作响应式垂直视频？

在HTML和CSS上制作响应式垂直视频可以通过以下步骤实现：

1. 首先，确保你有一个视频文件可用，并将其保存在你的项目文件夹中。
2. 在HTML文件中，使用<video>标签来嵌入视频。例如：

<video controls>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上面的示例中，src属性指定了视频文件的路径和文件名，type属性指定了视频文件的MIME类型。controls属性用于显示视频控制条。

1. 在CSS文件中，为视频容器创建一个样式类，并设置其宽度和高度。例如：

.video-container {
  width: 100%;
  height: 100vh;
}

在上面的示例中，100%表示视频容器的宽度将填满其父元素的宽度，100vh表示视频容器的高度将填满整个视口的高度。

1. 使用媒体查询来定义不同屏幕尺寸下的样式。例如，如果你希望在移动设备上隐藏视频控制条，可以添加以下样式：

@media screen and (max-width: 600px) {
  .video-container video {
    controls: none;
  }
}

在上面的示例中，max-width: 600px表示当屏幕宽度小于等于600像素时，应用这个样式。

1. 最后，在HTML文件中使用你创建的样式类来包裹视频标签。例如：

<div class="video-container">
  <video controls>
    <source src="your-video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

这样，你就可以在HTML和CSS上制作一个响应式垂直视频了。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，建议你参考腾讯云官方文档或搜索相关资源以获取更多关于腾讯云的信息。