Youtube Player Flutter

youtube_player_flutter

A batteries-included YouTube player for Flutter. Drop it in and get a fully working player (controls, gestures, live stream support, and more) with just a few lines of code.

pub Web Demo Stars BSD-3 License

Features

  • Built-in playback controls (play/pause, seek bar, duration, fullscreen)
  • Drag left/right to fast-forward or rewind
  • Pinch gesture to enter fullscreen
  • Live stream UI with a red indicator
  • Customisable top and bottom action bars
  • No YouTube API key required
  • Supports Android, iOS, macOS, and Web

Built on top of youtube_player_iframe. If you need direct access to the iFrame API or want to build a fully custom UI, use that package instead.

Installation

flutter pub add youtube_player_flutter

Quick Start

1. Create a controller

final controller = YoutubePlayerController(
  initialVideoId: '<video-id>',
  flags: const YoutubePlayerFlags(
    autoPlay: true,
    mute: false,
  ),
);

Have a YouTube URL instead of a video ID? Use the helper:

final videoId = YoutubePlayer.convertUrlToId(
  'https://www.youtube.com/watch?v=BBAyRBTfsOU',
); // → 'BBAyRBTfsOU'

2. Add the player widget

YoutubePlayer(
  controller: controller,
  showVideoProgressIndicator: true,
  progressIndicatorColor: Colors.red,
)

3. Add fullscreen support

Wrap with YoutubePlayerBuilder to enable fullscreen:

YoutubePlayerBuilder(
  player: YoutubePlayer(controller: controller),
  builder: (context, player) {
    return Scaffold(
      body: Column(
        children: [
          player,
          // rest of your screen
        ],
      ),
    );
  },
)

4. Dispose when done

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

Live Stream Videos

Set isLive: true to switch the player to a live stream UI (red indicator, no seek bar):

final controller = YoutubePlayerController(
  initialVideoId: '<live-stream-id>',
  flags: const YoutubePlayerFlags(isLive: true),
);

YoutubePlayer(
  controller: controller,
  liveUIColor: Colors.red,
)

Custom Controls

Use topActions and bottomActions to swap in your own controls. Several pre-built widgets are included:

Widget What it shows
PlayPauseButton Play / pause toggle
CurrentPosition Current timestamp
RemainingDuration Time left
ProgressBar Seek bar
FullScreenButton Fullscreen toggle
PlaybackSpeedButton Speed picker 
YoutubePlayer(
  controller: controller,
  bottomActions: [
    CurrentPosition(),
    ProgressBar(isExpanded: true),
    RemainingDuration(),
    FullScreenButton(),
  ],
)

Platform Requirements

Platform Minimum
Android API level 20 (minSdkVersion 20)
iOS iOS 11, Swift, Xcode ≥ 11
macOS macOS 10.14
Web Any modern browser

For Android and iOS setup details, see the webview_flutter docs.

Example

Try the live web demo or see the example app for a complete working demo.

License

BSD-3-Clause. See LICENSE for details.

This package uses the YouTube IFrame Player API. By using this package, you agree to the YouTube API Services Terms of Service.

Libraries

youtube_player_flutter