Flutter Play YouTube Videos

YouTube is one of the best video streaming platform available on internet today. Few times there are requirement to show YouTube videos in app. Because every product company has their Ads, promotional videos and user testimonials uploaded on their YouTube channel. We will play YouTube videos in flutter app with youtube_player_flutter package. We have to install this package in our flutter project and boom YouTube videos will start playing in flutter app.

Flutter Play YouTube Videos

1. Execute below command to install youtube_player_flutter in your flutter project. This command must be execute in project folder from Terminal.

flutter pub add youtube_player_flutter

2. For Android setup we will set set minSdkVersion to 17 in your flutter app android/app/build.gradle file

3. For iOS setup we will set io.flutter.embedded_views_preview key in info.plist file.

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

4. Import material.dart and youtube_player_flutter.dart package in main.dart file.

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

5. Creating a Sting variable and Assign YouTube video ID. I'm adding Complete YouTube video URL as comment above. So you will understand which is Video ID in YouTube URL.

 // YouTube Video Full URL : https://www.youtube.com/watch?v=UrIaQbIK2E4&ab_channel=BBKiVines
  static String videoID = 'UrIaQbIK2E4';

6. Creating YoutubePlayerController and define video configuration options.

   final YoutubePlayerController videoController = YoutubePlayerController(
    initialVideoId: videoID,
    flags: const YoutubePlayerFlags(
      autoPlay: false,
      mute: false,
    ),
  );

7. Creating YoutubePlayer widget and defining Controller and Video ID with default options.

YoutubePlayer(
        controller: videoController,
        liveUIColor: Colors.amber,
        showVideoProgressIndicator: true,
      ),

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  // YouTube Video Full URL : https://www.youtube.com/watch?v=UrIaQbIK2E4&ab_channel=BBKiVines
  static String videoID = 'UrIaQbIK2E4';

  final YoutubePlayerController videoController = YoutubePlayerController(
    initialVideoId: videoID,
    flags: const YoutubePlayerFlags(
      autoPlay: false,
      mute: false,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Center(
      child: YoutubePlayer(
        controller: videoController,
        liveUIColor: Colors.amber,
        showVideoProgressIndicator: true,
      ),
    );
  }
}