蘑菇视频官网刚装好横竖屏如果只能做一件事：先改这里

蘑菇视频官网刚装好，横屏竖屏看起来怪怪的？如果此刻只能做一件事，先改这里：把视频容器改成“响应式且能自动识别纵横比”的播放容器。做好这一点，绝大多数横竖屏适配、裁剪和黑边问题都能迎刃而解。

为什么先改容器？

• 视频来自多种来源（16:9、9:16、1:1），固定尺寸或简单的 width:100% 经常导致拉伸、裁切或出现黑边。
• 一个能自适应纵横比并在必要时切换展示模式（contain/cover）的容器，能保证手机、平板、桌面在任何方向下都有良好观感。
• 这比盲目改播放器参数或堆大量脚本更稳、更省事。

一步到位的实现方案（可直接放到站点的嵌入代码里）

HTML 结构（示例）：

核心 CSS（含现代写法与兼容回退）：

自动识别纵横比的轻量脚本（判断视频元数据后切换样式）：

实战小贴士（发布到 Google 网站时注意）

• 检查页面是否包含 ，没有就加上（否则移动端缩放会影响效果）。
• Google Sites 可用“嵌入”功能插入上面的代码（或把播放器放到支持 HTML 的嵌入区域）。
• 对外链视频（如 CDN、OSS）确保开启 CORS 或使用合适的 poster，避免跨域播放问题。
• 支持竖屏短视频时，object-fit: cover 能在竖屏显示更沉浸，但会裁切两侧，按内容权衡使用。
• 测试：横竖屏切换、全屏按钮行为、不同设备和浏览器（微信内置浏览器也要测）。

结语 先把视频容器做成能“识别视频本身比例并据此切换展示策略”的那种响应式容器，很多横竖屏的尴尬瞬间就不复存在。做完这一步，再去微调封面、加载策略和播放体验，整个站点的观看体验会立刻提升。需要我把上面代码打包成可直接嵌入 Google Sites 的完整片段吗？

• 喜欢（10）
• 不喜欢（3）