YouTube video height is too small in WebView Jetpack Compose - android-webview

Question

I am playing around with Jetpack Compose, so I created an sample app that has only one webview that loads the YouTube URL. and When I play a video the height of the video is too small.
#Composable
fun MyScreen() {
val context = LocalContext.current
Surface {
AndroidView(
factory = {
WebView(context).apply {
settings.javaScriptEnabled = true
webViewClient = WebViewClient()
webChromeClient = WebChromeClient()
}
},
update = {
it.loadUrl("https://youtube.com")
},
modifier = Modifier.fillMaxSize()
)
}
}

Answer 1

You can set a custom aspect ratio to your layout by Modifier.aspectRatio(16 / 9f) (16:9 is the most common video aspect ratio).
Or if you want to see more content from the WebView you can just make the size larger or make it fillMaxSize().
If you actually want to create an app that uses YouTube webviews, I suggest looking at this library both for code reference and potentially just using it.

Answer 2

Also had this problem. As pointed by #Pylyp Dukhov, it doesn't happens when using XML. So what I did, for now, is inflate a XML with a WebView inside a Frame layout an pass that as the Android view's factory's return

Answer 3

I had the same problem. I still don't know why it behaves like that (I guess it's a bug) but in the end I got it working by using the Google Accompanist WebView.
val state = rememberWebViewState("https://youtube.com")
WebView(
modifier = Modifier.fillMaxSize(),
state = state
)
Here is a full example.
Edit:
Looking at the Accompanist WebView source code, you only have to set the WebView height and width to MATCH_PARENT. Like this:
AndroidView(
factory = { context ->
WebView(context).apply {
settings.javaScriptEnabled = true
webViewClient = WebViewClient()
webChromeClient = WebChromeClient()
layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
loadUrl("https://youtube.com")
}
}
)