Flutter plugin for playing or streaming YouTube videos

Flutter plugin for playing or streaming YouTube videos inline using the official iFrame Player API.

Supported Platforms:

• Android
• iOS

Salient Features

• Inline Playback
• Supports captions
• No need for API Key
• Supports custom controls
• Retrieves video meta data
• Supports Live Stream videos
• Supports changing playback rate
• Support for both Android and iOS
• Adapts to quality as per the bandwidth
• Fast Forward and Rewind on horizontal drag
• Fit Videos to wide screens with pinch gestures

The plugin uses flutter_inappwebview under-the-hood.

Since flutter_inappwebview relies on Flutter’s mechanism for embedding Android and iOS views, this plugin might share some known issues tagged with the platform-views label.

Requirements

• Android: minSdkVersion 17 and add support for androidx (see AndroidX Migration)
• iOS: --ios-language swift, Xcode version >= 11

Setup

iOS

Add these lines to Info.plist

<key>io.flutter.embedded_views_preview</key>
<true/>

For more info, see here

Android

Set minSdkVersion of your android/app/build.gradle file to at least 17.

For more info, see here

Using Youtube Player

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

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

For FullScreen Support

If fullscreen support is required, wrap your player with YoutubePlayerBuilder

YoutubePlayerBuilder(
    player: YoutubePlayer(
        controller: _controller,
    ),
    builder: (context, player){
        return Column(
            children: [
                // some widgets
                player,
                //some other widgets
            ],
        );
    ),
),

Playing live stream videos

Set the isLive property to true in order to change the UI to match Live Video.

YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: 'iLnmTe5Q2Qw',
    flags: YoutubePLayerFlags(
      isLive: true,
    ),
);

YoutubePlayer(
    controller: _controller,
    liveUIColor: Colors.amber,
),

Want to customize the player?

With v5.x.x and up, use the topActions and bottomActions properties to customize the player.

Some of the widgets bundled with the plugin are:

• FullScreenButton
• RemainingDuration
• CurrentPosition
• PlayPauseButton
• PlaybackSpeedButton
• ProgressBar

YoutubePlayer(
    controller: _controller,
    bottomActions: [
      CurrentPosition(),
      ProgressBar(isExpanded: true),
      TotalDuration(),
    ],
),

Want to play using Youtube URLs ?

The plugin also provides convertUrlToId() method that converts youtube links to its corresponding video ids.

String videoId;
videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");
print(videoId); // BBAyRBTfsOU