How to minimize Full Screen Flutter Youtube Player on mobile back button press?

Question

When the flutter youtube player is full screen, and i pressing back button of mobile i want to minimize the youtube player so how can i do this?

My Flutter Youtube Player code as below.

class _VideoPlayerState extends State<VideoPlayer> {
  late YoutubePlayerController _youtubePlayerController;
  late bool _isPlayerReady;

  @override
  void initState() {
    super.initState();
    _isPlayerReady = false;
    var url = widget.video.url;
    var videoUrl = YoutubePlayer.convertUrlToId(url!);
    _youtubePlayerController = YoutubePlayerController(
      initialVideoId: videoUrl!,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
        disableDragSeek: false,
        loop: false,
        isLive: false,
        forceHD: false,
        hideControls: false,
      ),
    )..addListener(_listener);
  }

  void _listener() {
    if (_isPlayerReady &&
        mounted &&
        !_youtubePlayerController.value.isFullScreen) {}
  }

  @override
  void dispose() {
    _youtubePlayerController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: YoutubePlayer(
        controller: _youtubePlayerController,
        aspectRatio: 16 / 9,
        showVideoProgressIndicator: true,
        onReady: () {
          _isPlayerReady = true;
        },
      ),
    );
  }
}

But when i pressed back button my app screen looks like as below.

so here i want to minimize youtube player when back button is pressed.

First my app orientation in portrait then i play videos in full screen then pressed back button my app orientation is in landscape.

So i want to just minimize the youtube player on back button press.

Answer 1

I, Also have the same problem as you when click fullscreen it became like that on your image provided but as i search through i found a way to wrap the youtube player to youtube player iframe.

then after adding this package i can freely fullscreen and back to same it was.

https://pub.dev/packages/youtube_player_iframe

Answer 2

I did it by wrapping YoutubePlayer with YoutubePlayerBuilder, as below:

return Container(
      child: YoutubePlayerBuilder(
          player: YoutubePlayer(
            controller: _youtubePlayerController,
          ),
          builder: (context, player) {
            return Container(
              child: player,
            );
          }),
    );