Vuetify v-card嵌入video异常且左右边距适配问题求解

API 探路者

2026-10-2

问题原因

嵌套规则错误：你将<v-card-title>写在了<video>标签内部，不符合HTML规范。<video>标签仅支持嵌套<source>、<track>标签或浏览器不兼容时的降级提示内容，所有自定义组件/Vuetify组件放在<video>内部都会被浏览器忽略，这是你渲染异常的核心原因。
适配样式缺失：
- <v-card>默认带内置内边距，直接放置视频会触发留白
- <video>作为替换元素默认object-fit属性为fill，宽高比和容器不匹配时就会出现左右/上下黑边，同时默认的行内块特性也会带来多余间距。

修复方案

调整标签嵌套结构，单独用相对定位容器包裹视频和悬浮的标题，补充适配样式即可，修改后代码如下：

<v-card hover width="250" class="pa-0 overflow-hidden">
  <!-- 视频+标题容器 相对定位 -->
  <div class="relative">
    <video 
      height="350px" 
      width="100%"
      src="******************"
      class="d-block"
      style="object-fit: cover;"
      controls <!-- 可按需添加控制条，不需要就删掉 -->
    >
    </video>
    <!-- 标题改到video外部 绝对定位悬浮在视频顶部 -->
    <v-card-title class="white--text mt-1 absolute top-0 left-0 w-100">
      <p class="ml-1">
        name
      </p>
    </v-card-title>
  </div>
  <v-card-text>
    <div class="font-weight-bold ml-2 mb-1">
      subject
    </div>
    <div class="font-weight-bold ml-2 mb-2">
      text
    </div>
  </v-card-text>
  <v-card-actions class="justify-center">
    <v-btn height="40" width="130" depressed class="test2 mt-10 mb-10" color="teal">
      button
    </v-btn>
  </v-card-actions>
</v-card>