Kotlin Multiplatform是否支持IFrame元素？Jetpack Compose跨端嵌YouTube视频需求

云上老周

2026-7-3

跨平台Jetpack Compose展示YouTube视频方案

核心思路

Compose Multiplatform没有原生IFrame组件，可通过WebView封装实现类似效果，直接加载YouTube嵌入URL，适配Android和iOS双平台。

实现步骤

1. 配置依赖

在共享模块的build.gradle.kts中添加WebView依赖：

implementation("androidx.compose.ui:ui-webview:1.6.0")

iOS端需在iosApp的Podfile中添加：

pod 'WebKit'

2. 封装跨平台WebView组件

先定义共享接口：

@Composable
expect fun YoutubeWebView(videoUrl: String)

Android端实现

@Composable
actual fun YoutubeWebView(videoUrl: String) {
    AndroidView(factory = { context ->
        WebView(context).apply {
            settings.javaScriptEnabled = true
            settings.mediaPlaybackRequiresUserGesture = false // 可选：允许自动播放
            loadUrl(videoUrl)
        }
    })
}

iOS端实现

@Composable
actual fun YoutubeWebView(videoUrl: String) {
    UIKitView(factory = {
        WKWebView().apply {
            load(URLRequest(url = URL(string = videoUrl)!!))
        }
    })
}

3. 加载YouTube视频

获取视频嵌入URL（格式为https://www.youtube.com/embed/[视频ID]），在Compose界面调用组件：

@Composable
fun YoutubeVideoPlayer() {
    val videoEmbedUrl = "https://www.youtube.com/embed/dQw4w9WgXcQ"
    YoutubeWebView(videoUrl = videoEmbedUrl)
}