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.

CodePudding user response：

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

CodePudding user response：

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