解决iframe跨域全屏播放报错问题

当在iframe中嵌入跨域视频网站并尝试全屏播放时，通常会遇到跨域安全限制导致的报错。以下是几种解决方案：

1. 使用allowfullscreen属性

确保iframe标签中包含allowfullscreen属性：

<iframe src="https://video-site.com/embed" allowfullscreen></iframe>

2. 添加allow属性（现代浏览器）

对于现代浏览器，还需要添加allow属性：

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

3. 使用postMessage通信

如果视频网站支持，可以通过postMessage与父页面通信：

// 父页面
window.addEventListener('message', (event) => {
  if (event.data === 'requestFullscreen') {
    const iframe = document.querySelector('iframe');
    if (iframe.requestFullscreen) {
      iframe.requestFullscreen();
    }
  }
});

// iframe内页面
function requestFullscreen() {
  window.parent.postMessage('requestFullscreen', '*');
}

4. 使用代理服务器

如果视频网站允许，可以设置一个后端代理来绕过跨域限制：

// 后端代理路由
app.get('/proxy/video', async (req, res) => {
  const response = await fetch('https://video-site.com/embed');
  const html = await response.text();
  res.send(html);
});

5. 检查视频网站提供的SDK/API

许多视频网站(如YouTube, Vimeo)提供专门的嵌入API，这些API已经处理了跨域问题：

<!-- YouTube示例 -->
<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
></iframe>

6. 响应头设置

如果你控制视频网站服务器，可以设置以下响应头：

Access-Control-Allow-Origin: *
X-Frame-Options: ALLOW-FROM https://your-domain.com

注意事项

1. 某些网站(如Netflix)有严格的安全策略，无法在iframe中全屏播放
2. 移动设备上的全屏行为可能与桌面不同
3. 确保遵循视频网站的使用条款，避免违反版权规定

选择哪种方案取决于你对视频网站的控制程度和技术环境。通常组合使用allowfullscreen属性和视频网站提供的API是最可靠的解决方案。