YouTube Embed Player in Flutter

In this article, we are going to integrate youtube embed player in flutter application using youtube_player_iframe package. You can also check out flutter video player related articles.

We can play video from network source using youtube_player_iframe package. Using this package, we can also play livestream youtube videos, youtube playlist. We can also customize youtube video player using this package. To use this package. we need to set minSdkVersion to 17 in our android/app/build.gradle file to play video in android app. for iOS platform, Xcode version should be greater than 11.

We can customize our youtube player using YoutubePlayerController widget. This class provides different methods to play, pause, stop video. We can also play next and previous video from playlist using YoutubePlayerController. We can also play specific video from playlist using playVideoAt(index) method.

We can also mute and unmute our video player. We can also change volume of video using setVolume method. We can also play video in loop using setLoop(loop) method. We can also enable or disable shuffle video. To reset our youtube player controller, We need to use reset() method. We can also set custom size of youtube player using setSize(size) method.

We can also play video automatically when youtube player loads by giving value true to autoPlay parameter. To enable captions in youtube player, we need to give value true to enableCaption property. We can also hide controls of video player by giving value false to showControls property. We can also show/hide full screen button in youtube video player.

 

Add required package in pubspec.yaml file

youtube_player_iframe: ^2.2.2
 
 

Initialize YouTube Embed Player Controller

YoutubePlayerController myYouTubePlayerController;

@override
void initState() {
super.initState();

setDeviceOrientation([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
]);

WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
myYouTubePlayerController = YoutubePlayerController(
    initialVideoId: ‘xYGK6lxqAqI’,
    params: YoutubePlayerParams(
        showFullscreenButton: true,
    ),
);
});
});
}

@override
void dispose() {
super.dispose();

setDeviceOrientation([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
]);

myYouTubePlayerController.close();
}

setDeviceOrientation(List<DeviceOrientation> orientations) {
    SystemChrome.setPreferredOrientations(orientations);
}

 
 

Embed YouTube Video in Flutter

AspectRatio(
    aspectRatio: 16 / 9,
    child: myYouTubePlayerController != null
    ? YoutubePlayerIFrame(controller: myYouTubePlayerController)
    : Center(child: CircularProgressIndicator()),
),
 
 
youtube embed player
 

One thought on “YouTube Embed Player in Flutter

Leave a Reply