我来帮你拆解这两个Safari里常见的YouTube嵌入问题，都是前端开发中经常遇到的坑：

一、视频在Safari中无法正常运行 #

可能的原因和对应解决方法：

• Safari严格的自动播放政策：Safari默认阻止未经过用户交互的媒体自动播放，除非视频是静音状态。如果你的iframe没有设置静音就尝试自动播放，肯定会被拦截。
  解决：给YouTube嵌入URL加上mute=1参数，同时给iframe添加allow="autoplay"权限。示例代码：

  <iframe src="https://www.youtube.com/embed/你的视频ID?mute=1" allow="autoplay; encrypted-media"></iframe>
  

• 缺失必要的iframe权限：如果视频是加密内容，缺少encrypted-media权限会导致加载失败；另外没有正确声明权限也会影响播放。
  解决：确保iframe的allow属性包含autoplay; encrypted-media（如果不需要自动播放可以去掉autoplay）。
• Safari隐私设置拦截：Safari的智能跟踪预防（ITP）可能会阻止YouTube的第三方资源加载，尤其是用户禁用了第三方Cookie时。
  解决：可以在页面上添加提示，引导用户暂时允许网站的第三方内容，或者让他们在Safari设置中调整隐私选项。

二、点击全屏后仅显示半个屏幕 #

这个问题通常和父元素的CSS样式或iframe属性有关：

• 父元素的overflow: hidden限制：如果iframe的父容器设置了overflow: hidden，当视频触发全屏时，父元素的裁剪规则会生效，导致视频只能显示部分区域。
  解决：可以通过JavaScript监听全屏事件，在进入全屏时动态移除父元素的overflow: hidden样式，退出全屏时再恢复。
• 缺失全屏权限属性：虽然现在标准是allowfullscreen，但Safari对旧属性的兼容依然有要求，缺少的话会导致全屏功能异常。
  解决：给iframe添加完整的全屏兼容属性：

  <iframe src="https://www.youtube.com/embed/你的视频ID" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe>
  

• 父元素的transform或尺寸限制：如果父元素使用了transform属性（比如translate、scale），Safari会因为堆叠上下文的问题导致全屏渲染异常；另外父元素的max-height/max-width也可能限制视频全屏后的尺寸。
  解决：要么移除父元素的transform属性，要么把iframe放在一个没有这些样式的独立容器中；同时检查是否有固定的尺寸限制，全屏时解除这些限制。

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