No need for an extra API — YouTube serves thumbnail images directly.

Step 2: Embedding YouTube Player in a Compose Screen

To make this work, I used a View-based library: android-youtube-player

This library provides a YouTubePlayerView with lifecycle support and built-in integration for the web-based iframe player. It’s stable, customizable, and works well inside a Compose screen via interop.

Add the Library to Your Project

First, include the dependency in your build.gradle:

dependencies {
    implementation "com.pierfrancescosoffritti.androidyoutubeplayer:core:12.1.0"
}

Embedding the Player with AndroidView (Step by Step)

Here’s the full implementation of my YouTubePlayerScreen. I’ll explain each section below to show how it solves common challenges like orientation changes, playback resuming, and immersive video.

@Composable
fun YouTubePlayerScreen(videoId: String, onBack: () -> Unit) {
    val lifecycleOwner = LocalLifecycleOwner.current
    var playbackPosition by rememberSaveable { mutableFloatStateOf(0f) }
    val context = LocalContext.current
    val orientation = remember { mutableIntStateOf(context.resources.configuration.orientation) }

    val configuration = LocalConfiguration.current
    LaunchedEffect(configuration) {
        orientation.intValue = configuration.orientation
    }

    val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE

    val window = (LocalView.current.context as ComponentActivity).window
    SideEffect {
        WindowCompat.getInsetsController(window, window.decorView).apply {
            hide(WindowInsetsCompat.Type.statusBars())
            hide(WindowInsetsCompat.Type.navigationBars())
        }
    }

    DisposableEffect(Unit) {
        onDispose {
            WindowCompat.getInsetsController(window, window.decorView).apply {
                show(WindowInsetsCompat.Type.statusBars())
                show(WindowInsetsCompat.Type.navigationBars())
            }
        }
    }

    val isWifiConnected = remember { mutableStateOf(checkIfWifiConnected(context)) }
    val coroutineScope = rememberCoroutineScope()

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
    ) {
        AndroidView(
            modifier = Modifier
                .then(if (isLandscape) Modifier.fillMaxHeight() else Modifier.fillMaxWidth())
                .aspectRatio(16f / 9f)
                .align(Alignment.Center),
            factory = { context ->
                YouTubePlayerView(context).apply {
                    lifecycleOwner.lifecycle.addObserver(this)

                    addYouTubePlayerListener(object : AbstractYouTubePlayerListener() {
                        override fun onReady(youTubePlayer: YouTubePlayer) {
                            youTubePlayer.loadVideo(videoId, playbackPosition)

                            if (isWifiConnected.value) {
                                coroutineScope.launch {
                                    delay(500)
                                    youTubePlayer.loadVideo(videoId, playbackPosition)
                                }
                            }
                        }

                        override fun onCurrentSecond(youTubePlayer: YouTubePlayer, second: Float) {
                            playbackPosition = second
                        }
                    })
                }
            }
        )

        Box(
            modifier = Modifier
                .align(Alignment.TopEnd)
                .padding(top = 16.dp, end = 16.dp)
                .background(Color.White.copy(alpha = 0.1f), shape = CircleShape)
                .clickable { onBack() }
                .size(40.dp),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = Icons.Filled.Close,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier.size(24.dp)
            )
        }
    }
}

Let’s Break It Down

rememberSaveable + playbackPosition

var playbackPosition by rememberSaveable { mutableFloatStateOf(0f) }

This stores the current playback position and preserves it across recompositions and configuration changes like screen rotation. So when the device rotates, the video will resume from the same second.

Orientation Detection

val configuration = LocalConfiguration.current
val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE

We track current orientation to control layout and fullscreen behavior. When the phone is in landscape, we want to make the video truly fullscreen and immersive.

Hiding System UI for Immersive Mode

val window = (LocalView.current.context as ComponentActivity).window
SideEffect {
    WindowCompat.getInsetsController(window, window.decorView).apply {
        hide(WindowInsetsCompat.Type.statusBars())
        hide(WindowInsetsCompat.Type.navigationBars())
    }
}

When the video screen is shown, we hide both the status bar and the navigation bar — giving the user a true fullscreen playback experience.

And we restore the UI when the Composable leaves:

DisposableEffect(Unit) {
    onDispose {
        WindowCompat.getInsetsController(window, window.decorView).apply {
            show(WindowInsetsCompat.Type.statusBars())
            show(WindowInsetsCompat.Type.navigationBars())
        }
    }
}

WiFi Check for Better Quality Playback

val isWifiConnected = remember { mutableStateOf(checkIfWifiConnected(context)) }

If the user is on WiFi, we slightly delay and reload the video again after 500ms:

if (isWifiConnected.value) {
    coroutineScope.launch {
        delay(500)
        youTubePlayer.loadVideo(videoId, playbackPosition)
    }
}

This is a little hack I discovered in practice: it lets YouTube buffer a higher resolution stream, especially if the first load used a low-bitrate mobile fallback.

Lifecycle Management

lifecycleOwner.lifecycle.addObserver(this)

This is essential. It ensures the YouTube player is aware of the host activity’s lifecycle and can pause/resume/clean upcorrectly.

Close Button UI

Box(...) {
    Icon(...)
}

We add a simple close button in the top-right corner so the user can exit the video easily. This triggers the onBack() lambda passed from navigation.

Helper Function: Check for WiFi

fun checkIfWifiConnected(context: Context): Boolean {
    ...
}

LazyRow(...) {
    items(videos) { video ->
        YouTubeThumbnail(
            videoId = video.key,
            videoName = video.name,
            onVideoClick = { selectedId ->
                onAction(MovieDetailsAction.OpenVideo(selectedId))
            }
        )
    }
}

sealed class MovieDetailsAction {
    data class OpenVideo(val videoId: String) : MovieDetailsAction()
}

composable(
    route = AppNavRoutes.YouTubePlayer.route,
    arguments = listOf(navArgument("videoId") { type = NavType.StringType })
) { backStackEntry ->
    val videoId = backStackEntry.arguments?.getString("videoId")
    videoId?.let {
        YouTubePlayerScreen(videoId = videoId) {
            navController.popBackStack()
        }
    }
}

object AppNavRoutes {
    val YouTubePlayer = object {
        const val route = "youtube_player/{videoId}"
        fun buildRoute(videoId: String) = "youtube_player/$videoId"
    }
}

navController.navigate(AppNavRoutes.YouTubePlayer.buildRoute(videoId))

if (isWifiConnected.value) {
    coroutineScope.launch {
        delay(500)
        youTubePlayer.loadVideo(videoId, playbackPosition)
    }
}

DisposableEffect(Unit) {
    onDispose {
        WindowCompat.getInsetsController(window, window.decorView).apply {
            show(WindowInsetsCompat.Type.statusBars())
            show(WindowInsetsCompat.Type.navigationBars())
        }
    }
}