如何用CSS阻止手机旋转时iframe嵌入视频自动全屏？

你之前用CSS媒体查询改allowfullscreen根本没用——因为这是iframe的HTML属性，不是CSS能控制的，CSS改不了这个权限设置。

给你几个靠谱的解决办法：

• 直接修改iframe的HTML属性：在iframe标签里加上playsinline和webkit-playsinline，这俩是iOS专属属性，能强制视频在页面内内嵌播放，不会一横屏就跳全屏。同时别加allowfullscreen属性，或者明确设为allowfullscreen="false"。示例代码：

<iframe 
  src="你的视频地址" 
  width="100%" 
  height="300" 
  playsinline 
  webkit-playsinline
></iframe>

• 用JS监听旋转事件兜底：如果上面的方法还不稳，就加个JS监听屏幕旋转，横屏时动态调整iframe属性：

window.addEventListener('orientationchange', function() {
  const videoIframe = document.querySelector('iframe');
  // 90或-90度对应横屏状态
  if (window.orientation === 90 || window.orientation === -90) {
    videoIframe.removeAttribute('allowfullscreen');
    videoIframe.setAttribute('playsinline', true);
    videoIframe.setAttribute('webkit-playsinline', true);
  }
});

iOS的Safari对视频播放有特殊限制，playsinline是核心，必须加上才能避免横屏强制全屏。之前的CSS写法完全找错了方向，因为CSS没法修改iframe的权限类属性。

内容的提问来源于stack exchange，提问作者Marianne