How to use Youtube Video Player in Flutter

In this post, we are going to see how we can play Youtube Videos using standard Youtube Video Player in a Flutter application.

Using a Video-on-demand service incurs a high cost as the number of users increase. So, if you are just looking for a simple solution that allows users to play videos on your Flutter app, Youtube Video Player is a great choice. You don’t have to implement a service, or pay high costs for allowing users to view videos, and the videos will have all the standard controls that are needed.

So, without any further ado, let’s get started.

We are going to use this package from pub.dev
https://pub.dev/packages/youtube_player_flutter

Step 1:

Go to pubspec.yaml file, and add the following line replacing [latest_version] with the latest version of the package, and run flutter pub get:

youtube_player_flutter: [latest_version]

Note: Make sure to check the latest version of the package, and use that.

Step 2:

For Android, make sure that the minSdkVersion inside android/app/build.gradle file is to at least 17.

Step 3:

Create YoutubePlayerController with the id of the video you want to play. So, for example, if want to play this video (https://youtube.com/watch?v=-BYWbosiYlw), the videoId would be “-BYWbosiYlw”.

Declare the controller inside the widget where you want to use the video player.

YoutubePlayerController _controller;

In initState, create YoutubePlayerController and assign it to _controller.

_controller = YoutubePlayerController(
 initialVideoId: '-BYWbosiYlw',
 flags: YoutubePlayerFlags(
 autoPlay: true,
 mute: true,
 ),
);

Step 4:

Use YoutubePlayer widget and provide the controller that we just created as follows:

YoutubePlayer(
  controller: _controller,
  showVideoProgressIndicator: true,
  progressIndicatorColor: Colors.amber,
  progressColors: ProgressBarColors(
    playedColor: Colors.amber,
    handleColor: Colors.amberAccent,
  ),
  onReady: () {
    _controller.addListener(() {});
  },
),

Youtube Video Player

Now, if we run the app we can see that the video that we specified is playing inside Youtube Video Player.

[Optional] Step 5:

While testing on iOS simulator (iPhone 12 Pro), full screen was working with the above code. However, the package documentation indicates that in order to view the video in full screen, we need to wrap it inside YoutubePlayerBuilder as follows:

YoutubePlayerBuilder(
  player: YoutubePlayer(
    controller: _controller,
    showVideoProgressIndicator: true,
    progressIndicatorColor: Colors.amber,
    progressColors: ProgressBarColors(
      playedColor: Colors.amber,
      handleColor: Colors.amberAccent,
    ),
    onReady: () {
      _controller.addListener(() {});
    },
  ),
  builder: (context, player) => player,
),

You can see in the video below that the YoutubeVideoPlayer is working the way we want.

All the code for this post is available at:

https://github.com/tanzil114/flutter_youtube_video_player

This was a brief intro to the YoutubeVideoPlayer package. For more posts like this, and enhancing your knowledge of Flutter app development, follow my stories as well as my Youtube Channel (TheAppGuild).