<p> <embed src="/d/file/p/2024/08-10/e6d4ffd70d966734bd2a82c25fcba4cf.mp4" width="100%" height="280" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true"/> </p>
改为自适应：
<embed> 标签自适应代码优化
<embed> 是 HTML 中较老的嵌入外部内容的方式，主要用于 Flash 等插件内容。对于视频播放，现代浏览器更推荐使用 <video> 标签。但在某些特定场景下（如需要兼容旧系统或特定插件），仍需使用 <embed>。
以下是将您的代码改为自适应的优化方案。
一、优化后的代码
方案一：基础自适应版
html
<p style="position: relative; width: 100%; height: auto;"> <embed src="/d/file/p/2024/08-10/e6d4ffd70d966734bd2a82c25fcba4cf.mp4" style="width: 100%; height: auto; display: block;" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" /></p>
方案二：宽高比自适应版（推荐）
<p style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <embed src="/d/file/p/2024/08-10/e6d4ffd70d966734bd2a82c25fcba4cf.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" /> </p>
方案三：CSS 类名版（更规范）
html
<style>
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 宽高比 (9/16=0.5625) */
height: 0;
overflow: hidden;
background: #000;
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}</style><p class="video-container">
<embed
src="/d/file/p/2024/08-10/e6d4ffd70d966734bd2a82c25fcba4cf.mp4"
wmode="transparent"
play="true"
loop="false"
menu="false"
allowscriptaccess="never"
allowfullscreen="true"
/></p>二、原始代码的问题分析
| 问题 | 原因 | 后果 |
|---|---|---|
height="280" 固定值 | 高度写死为 280 像素 | 宽屏时高度不足，窄屏时高度过大，比例失调 |
width="100%" 配合固定高度 | 只有宽度自适应 | 视频会被拉伸变形，失去原始比例 |
| 缺少容器约束 | <embed> 直接放在 <p> 内 | 无法控制宽高比，响应式效果差 |
使用 <embed> 而非 <video> | 较老的嵌入方式 | 移动端兼容性较差，控制能力有限 |
三、各方案详解
方案一：基础自适应版
html
<embed style="width: 100%; height: auto; display: block;">
| 属性 | 作用 |
|---|---|
width: 100% | 宽度始终填满父容器 |
height: auto | 高度随宽度自动缩放，保持原始比例 |
display: block | 去除内联元素默认的间隙 |
优点：简单直接，保持视频原始宽高比
缺点：不同视频的原始比例不同，可能导致容器高度不一致
方案二：宽高比自适应版（16:9）
css
padding-bottom: 56.25%; /* 16:9 宽高比 */
原理：
padding-bottom的百分比是相对于父容器的宽度设置
padding-bottom: 56.25%相当于高度 = 宽度 × 9/16容器高度由
padding撑开，embed绝对定位填满容器
| 视频比例 | padding-bottom 值 | 说明 |
|---|---|---|
| 16:9 | 56.25% | 最常用（9 ÷ 16 = 0.5625） |
| 4:3 | 75% | 老式电视比例（3 ÷ 4 = 0.75） |
| 1:1 | 100% | 正方形 |
| 21:9 | 42.85% | 超宽屏（9 ÷ 21 ≈ 0.4285） |
四、更优雅的替代方案（推荐）
如果您的目标浏览器支持 HTML5，强烈建议改用 <video> 标签：
html
<p> <video controls width="100%" height="auto" preload="metadata" playsinline style="display: block; background: #000;" > <source src="/d/file/p/2024/08-10/e6d4ffd70d966734bd2a82c25fcba4cf.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video></p>
<video> vs <embed> 对比
| 对比项 | <video> | <embed> |
|---|---|---|
| 标准支持 | HTML5 标准 | HTML 早期规范，未进入标准 |
| 移动端兼容 | ✅ 良好 | ⚠️ 部分浏览器不支持 |
| 控制能力 | ✅ 丰富的 API | ❌ 有限 |
| 自适应实现 | 简单（width:100%; height:auto） | 需要 CSS 技巧 |
| 推荐程度 | ⭐⭐⭐⭐⭐ | ⭐⭐ |
五、各宽高比的 padding-bottom 速查表
| 视频比例 | 计算公式 | padding-bottom 值 |
|---|---|---|
| 16:9 | 9 ÷ 16 | 56.25% |
| 16:10 | 10 ÷ 16 | 62.5% |
| 4:3 | 3 ÷ 4 | 75% |
| 3:2 | 2 ÷ 3 | 66.67% |
| 1:1 | 1 ÷ 1 | 100% |
| 21:9 | 9 ÷ 21 | 42.86% |
| 2.35:1 | 1 ÷ 2.35 | 42.55% |
六、总结
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 方案一 | 视频原始比例固定 | 简单直接 | 容器高度可能不一致 |
| 方案二/三 | 需要统一显示比例 | 完全自适应，无变形 | 需要知道视频比例 |
改用 <video> | 现代浏览器环境 | 最佳兼容性和控制能力 | 需要改标签 |
一句话总结：将 <embed> 的固定 height="280" 改为 height: auto 或使用 padding-bottom 技巧实现固定宽高比容器，同时建议在条件允许时替换为 <video> 标签以获得更好的自适应效果和浏览器兼容性