aspect-video 类仅对容器元素生效且需明确宽度，正确用法是外层 div 添加 aspect-video 和宽度类（如 w-full），内嵌 video 或 iframe 并设置 w-full h-full object-cover 等样式以确保比例填充。

直接在 <video></video> 或 <iframe></iframe> 标签上加 aspect-video 没效果——这个类只对**容器元素**生效，且必须满足宽度前提。

必须用 div 包裹视频

不能把 aspect-video 写在 <video></video> 或 <iframe></iframe> 上，它们是替换元素，aspect-ratio 对其无效。正确结构是：

• 外层用 <div class="aspect-video w-full"> 作为容器 <li>内部放 <code><video></video> 或 <iframe></iframe>
• 确保容器有明确宽度来源（如 w-full、max-w-lg、flex-1）

关键类组合不能少

aspect-video 单独存在不会产生高度，它需要宽度基准来推算。常见有效组合：

• aspect-video w-full：全宽响应式容器
• aspect-video max-w-4xl mx-auto：居中、最大宽度限制
• aspect-video flex-1：在 Flex 布局子项中占满剩余空间

漏掉宽度类（比如只写 aspect-video），容器宽度为 0，高度就为 0。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载

视频内容要填满并保持比例

仅设容器比例还不够，<video></video> 或 <iframe></iframe> 本身需配合样式防止拉伸或留白：

• 加 w-full h-full 让内容撑满容器
• 必须指定 object-cover（裁剪填充）或 object-contain（完整显示）
• 推荐加 overflow-hidden 防止 cover 模式下边缘溢出

示例代码：


  


兼容性与备用方案

aspect-video 在 Tailwind v3.3+ 默认可用，但 Safari 15.3 及更早版本不支持。若需兼容老浏览器：

• 用 aspect-[0.5625]（即 9/16 = 0.5625）代替 aspect-video，提升兼容性
• 或退回 padding-bottom 技巧：relative pt-[56.25%] h-0 + 绝对定位子元素
• 检查 JIT 编译是否包含该类：在 tailwind.config.js 的 content 中确保扫描到使用位置