如何实现YouTube嵌入视频的全屏触发函数与编程全屏功能？

一、修复编程触发全屏的问题 #

你之前的代码失败核心原因是跨域限制：YouTube的iframe受同源策略保护，无法直接通过contentDocument访问内部DOM元素。正确方式是使用YouTube IFrame API提供的原生方法：

正确的全屏触发代码 #

// 需确保player实例已初始化完成后调用
webView.evaluateJavaScript("player.requestFullscreen()") { object, error in
    print(error?.localizedDescription ?? "")
}

注意：浏览器安全限制要求全屏请求必须由用户交互触发（比如点击事件），不能在页面加载完成后直接调用，否则会被拦截。

二、监听用户手势触发全屏的事件 #

要捕获用户通过放大手势进入全屏的动作，需要结合JS事件监听和原生回调：

1. 修改HTML中的JS代码，添加全屏事件监听 #

在你的embedHTML的<script>块中添加以下代码，监听页面全屏状态变化并通知原生iOS代码：

// 监听标准全屏事件
document.addEventListener('fullscreenchange', function() {
    if (document.fullscreenElement) {
        // 进入全屏，向原生发送消息
        window.webkit.messageHandlers.fullscreenHandler.postMessage('entered');
    }
});

// 兼容webkit内核的全屏事件（适配部分iOS版本）
document.addEventListener('webkitfullscreenchange', function() {
    if (document.webkitFullscreenElement) {
        window.webkit.messageHandlers.fullscreenHandler.postMessage('entered');
    }
});

2. 原生iOS代码配置消息监听 #

初始化WKWebView时，添加WKScriptMessageHandler接收JS发送的全屏事件：

// 初始化WKWebView配置
let webConfig = WKWebViewConfiguration()
let userContentController = WKUserContentController()
// 添加消息处理器，对应JS中的"fullscreenHandler"
userContentController.add(self, name: "fullscreenHandler")
webConfig.userContentController = userContentController

// 创建并添加WKWebView到视图
let webView = WKWebView(frame: view.bounds, configuration: webConfig)
view.addSubview(webView)

3. 实现消息处理协议 #

让你的ViewController遵守WKScriptMessageHandler协议，接收全屏事件并执行指定函数：

extension YourViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "fullscreenHandler", let status = message.body as? String else {
            return
        }
        
        if status == "entered" {
            // 执行你需要的指定函数
            executeYourSpecifiedFunction()
        }
    }
    
    // 自定义业务函数
    private func executeYourSpecifiedFunction() {
        print("用户进入全屏，执行指定操作")
        // 此处添加你的业务逻辑
    }
}

三、额外注意事项 #

• 确保YouTube IFrame API已完全加载，player实例初始化完成后再调用全屏方法或监听事件。
• 若需监听退出全屏动作，在JS的fullscreenchange事件中添加else分支，发送exited消息即可。

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