解决iframe视频全屏播放的跨域问题

当尝试通过JavaScript控制iframe中的视频全屏播放时，跨域限制是一个常见的安全障碍。以下是几种解决方案：

1. 使用postMessage通信

这是最推荐的跨域通信方式：

// 父页面代码
const iframe = document.getElementById('your-iframe');

// 发送全屏请求到iframe
iframe.contentWindow.postMessage({
  action: 'requestFullscreen'
}, 'https://iframe-domain.com');

// iframe内部代码
window.addEventListener('message', (event) => {
  if (event.data.action === 'requestFullscreen') {
    const video = document.getElementById('video-element');
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) { /* Safari */
      video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) { /* IE11 */
      video.msRequestFullscreen();
    }
  }
});

2. 设置iframe的allowfullscreen属性

确保iframe标签有正确的属性：

<iframe 
  src="https://video-provider.com/embed" 
  allowfullscreen
  allow="fullscreen"
></iframe>

3. 服务器端设置CORS头

如果你控制iframe内容所在的服务器，可以设置以下响应头：

Access-Control-Allow-Origin: https://your-parent-domain.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

4. 使用代理服务器

如果无法修改iframe源服务器的CORS策略，可以设置一个代理服务器来绕过跨域限制。

5. 使用第三方视频播放器API

许多视频平台(如YouTube、Vimeo)提供JavaScript API，允许通过其官方方法控制全屏：

// 例如YouTube API
player.requestFullscreen();

注意事项

1. 出于安全考虑，现代浏览器严格限制跨域iframe的全屏控制
2. 用户交互(如点击)通常是触发全屏的必要条件
3. 不同浏览器可能需要不同的全屏API前缀(webkit, ms等)
4. 始终检查全屏API的浏览器支持情况

选择哪种方案取决于你是否能控制iframe内容以及视频托管平台的支持情况。