蘑菇视频官网横屏切换时横竖屏一键变顺：只改这1项

很多人在手机或平板上看蘑菇视频时，会遇到一个小烦恼：从竖屏切到横屏，画面先闪一下、布局跳动或放大缩小的瞬间不流畅。实际上，这类体验差常常不是播放器本身的“缺陷”，而是页面在发生尺寸变化时没有平滑过渡所致。要把这个体验一键变顺，只需改好一项：给视频外层容器添加平滑过渡（transition）和响应式尺寸规则。下面一步步讲清楚，操作简单，马上能见效。

为什么会跳动？

手机旋转会触发浏览器的视口（viewport）重算，页面元素尺寸、布局会瞬间变化。
如果关键元素（比如视频容器）在尺寸和位置变化时没有过渡，浏览器就是直接重绘，造成“跳动”或“闪烁”。
给容器加上平滑过渡后，布局在旋转时会有动画感，肉眼看起来就顺滑多了。

只改这一项：给视频容器加 CSS 过渡核心思路很简单：让尺寸/变换属性在变化时带有过渡效果。常用的 CSS 规则如下（把类名换成你页面实际使用的容器）：

.video-container { max-width: 100%; height: auto; width: 100%; transition: width 0.25s ease, height 0.25s ease, transform 0.25s ease; -webkit-transition: width 0.25s ease, height 0.25s ease, transform 0.25s ease; transform-origin: center center; box-sizing: border-box; }

如果你的播放器是绝对定位或固定定位，也可以加上位置过渡：

.video-container.fixed { position: fixed; top: 0; left: 0; transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease; }

为什么只改这一项就行？

过渡（transition）负责在属性变化时平滑插值，避免瞬间跳变。
max-width:100% 与 height:auto 保证媒体尺寸能随屏宽自适应，不会在旋转时突然溢出或被裁剪。
transform-origin 让旋转/缩放以中心为参照，看起来更自然。

可选：在旋转事件里做微调（非必须，但能更优）有些机型或浏览器在旋转前后会有微小的尺寸测量差异，配合一个监听器可以在旋转完成后微调样式，使体验更稳：

window.addEventListener('orientationchange', function() { // 旋转立即触发：可先加个类改变样式，再在 300ms 后移除 document.body.classList.add('rotating'); setTimeout(function() { document.body.classList.remove('rotating'); // 这里可以触发一次播放器重绘或尺寸重置，比如： // player.resize && player.resize(); }, 350); });

body.rotating .video-container { transition-duration: 0.35s; /* 旋转期间的临时规则（可选） */ }

如何在蘑菇视频官网或你的 Google 网站上应用？

如果你能编辑站点的 CSS（自建站或经典站点），直接把上面的 CSS 加到全局样式表里，找对容器类名即可。
新版 Google Sites 不支持直接写全局 CSS，但可以： 1) 用“嵌入”功能插入一段自包含的 HTML 片段（包含样式 + 一个嵌入的播放器容器），或 2) 在播放器所在的嵌入页面外部，放一个覆盖层样式的 iframe（把样式写到 iframe 内部），保证视频容器使用上面规则。
如果蘑菇视频使用的是第三方播放器（如 Video.js、plyr 等），多数播放器支持自定义容器类名或样式表，把 transition 加到该容器上即可生效。

测试与常见问题

测试方法：在手机上打开页面，反复竖屏↔横屏，观察视频从一个方向过渡到另一个方向时是否顺滑。也可用 Chrome DevTools 的设备模拟器测试旋转。
若仍然发生闪烁：
检查是否有脚本在旋转时重建 DOM（重写视频节点会导致闪烁）。
确认没有强制的固定宽高（比如用 px 写死），改为百分比或 vw/vh。
某些 iOS 浏览器对 100vh 的处理有特殊行为，遇到问题时可以用 calc(100vh - 安全区) 等技巧修正。
如果你不熟悉代码，也可以联系站点开发者或让技术支持把这段 CSS 加到页面中。通常改动小、风险低，回滚也简单。

结语把蘑菇视频官网的横竖屏切换体验提升为“横竖屏一键变顺”，其实不需要改播放器核心，只需在视频外层容器加一条过渡规则，顺滑感立刻出来。按照上面的 CSS + 小技巧去做，几分钟内就能看到明显改善。需要我把上面代码根据你站点的具体类名定制一下吗？只要给我视频容器的类名或页面链接，我帮你把最终代码打包好。