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 ), ), ), ); } } |