Play YouTube videos on mobile devices with WebView

Use IFrame Player API and WebView to play YouTube videos on mobile devices.

This package leverages webview_flutter to embed a YouTube video player through the IFrame Player API. For state management, it utilizes the provider package.

Demo

IFrame player

iframe player view

Features

WebviewtubePlayer embeds the YouTube IFrame Player API in a WebView, using YouTube's native controls by default. Pair it with WebviewtubeController to drive playback or build your own UI on top.

Note: WebviewtubeVideoPlayer (the widgets-decorated player) is deprecated as of 4.0.0. Overlaying custom controls on the YouTube iframe violates YouTube's Required Minimum Functionality. It will be removed in a future major release.

Supported Platforms

The same as webview_flutter.

Android: SDK 21+
iOS: 12.0+

Usage

Check out example/lib/ for more details.

WebviewtubePlayer(videoId: '4AoFA19gbLo')

Configure the player

To customize or interact with the player, you can use a WebviewtubeController along with WebviewtubeOptions. The controller allows you to configure player options and interact with the player. Follow these steps to set up and use the controller:

Initialize the Controller: Create an instance of WebviewtubeController and pass the desired options using WebviewtubeOptions.
Pass the Controller to the Player: Provide the controller to the player widget.
Dispose of the Controller: To avoid memory leaks, always dispose of the controller when it's no longer needed to free up resources.

// ...
// inside a state of a stateful widget
late final WebviewtubeController controller;

@override
void initState() {
  super.initState();
  controller = WebviewtubeController(
    options: const WebviewtubeOptions(
      enableCaption: false,
    ),
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
    return WebviewtubePlayer(
      videoId: '4AoFA19gbLo',
      controller: controller,
    );
}

Customize the player

This package uses provider for state management, but you're free to fork and use your preferred tools. Build your own UI around WebviewtubeController — see example/lib/customized_player.dart for a worked example that demonstrates controlling the player and updating UI based on player events and state changes.

Acknowledgments

This package is inspired by the following packages, for which credit goes out to the respective authors.