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

Issue

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.
enter image description here

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.

Solution

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

Answered By – Arbiter Chil

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *