Flutter – Play YouTube Video

In this article, we will learn about how to play YouTube videos in our Flutter apps. You can use YouTube videos as a widget. The user can have all the access like play, pause and many more like on YouTube. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a flutter project or use an existing app

Create a Flutter app by the following command

Dart

flutter create .

Step 2: Add the package

Now we will add the following package to the app

Dart

dependencies:
  youtube_player_iframe: ^4.0.4

Step 3: Create a variable of Youtube player controller

Now we will create a variable for youtube player to controll the video play ,pause and any functionality related to video.

Dart

// TO control the youtube video functionality
final _controller = YoutubePlayerController();

Step 4: To load Video by its id

We can load video by its id like this

Dart

@override
 void initState() {
   super.initState();
   // TO load a video by its unique id
   _controller.loadVideoById(videoId: "KGD-T3bhFEA");
 }

Now you must have think about how to get the id for youtube.Then here are the steps:

First play your youtube video in your desktop browser. Now if you see the url it will look like this https://www.youtube.com/watch?v=KGD-T3bhFEA . In this the value after https://www.youtube.com/watch?v= is your id you will require in your app.

Step 5: Add the youtubeplayer as widget in your app

Add youtube player widget in your screen with controller as its properties ans with aspect ratio as per your requirement.

Dart

Center(
        // Youtube player as widget
        child: YoutubePlayer(
            controller: _controller, // Controler that we created earlier
            aspectRatio: 16 / 9,     // Aspect ratio you want to take in screen
          ),
   )

You have successfully implemented youtube player in your flutter app. There are multiple widgets available like YoutubePlayerScaffold for adding youtube player as scaffold and to customise the youtube buttons use YoutubeValueBuilder.

Complete Source Code

Dart

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

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

  @override
  State<YoutubePlayerScreen> createState() => _YoutubePlayerScreenState();
}

class _YoutubePlayerScreenState extends State<YoutubePlayerScreen> {
  // To control the youtube video functionality
  final _controller = YoutubePlayerController();
  @override
  void initState() {
    super.initState();
    // TO load a video by its unique id
    _controller.loadVideoById(videoId: "KGD-T3bhFEA");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),

        child: Center(
          // Youtube player as widget
          child: YoutubePlayer(
            controller: _controller, // Controler that we created earlier
            aspectRatio: 16 / 9,      // Aspect ratio you want to take in screen
          ),
        ),
      ),
    );
  }
}

Output: