Youtube_player_flutter: There is a problem when in fullsecrren[BUG]

Created on 11 Jun 2020  路  8Comments  路  Source: sarbagyastha/youtube_player_flutter

Describe the bug
When pressing the full screen it doesn't hide the appbar or and it also doesn't hide anything that is in the same body as the YouTube video player, the full screen becomes scrolable.
Also some of the buttons in the controller won't work, like: whatch later, share or the acount

Expected behavior
I would like that when full screen clicked to only show the video player and that the tubnaills would be clicklable .

Screenshots
Screenshot_20200611-152147

bug

Most helpful comment

~Having the same issue. I also made sure to use YoutubePlayerBuilder. I still get that Appbar issue when in full screen mode.~

UPDATE: Found the issue. The documentation is partly to blame as it does not clearly mention that if you use an Appbar, then you have to wrap your entire Scaffold within the YoutubePlayerBuilder.

player.dart

class VideoPage extends StatelessWidget {
  final String title;
  final String videoId;

  VideoPage({
    this.title,
    this.videoId,
  });

  @override
  Widget build(BuildContext context) {
    final YoutubePlayerController controller = YoutubePlayerController(
      initialVideoId: videoId,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        hideThumbnail: false,
      ),
    );

    return YoutubePlayerBuilder(
      player: YoutubePlayer(controller: controller),
      builder: (_, Widget player) {
        return Scaffold(
          appBar: buildAppBar(
            context: context,
            title: title,
          ),
          body: player,
        );
      },
    );
  }
}

UPDATE 2: @sarbagyastha, might want to clarify that in the docs. Thanks.

All 8 comments

Are you wrapping your player with YoutubePlayerBuilder ?

void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: widget.id,
flags: YoutubePlayerFlags(
forceHD: true,
mute: false,
autoPlay: true,
controlsVisibleAtStart: false,
hideControls: false,
hideThumbnail: true,
enableCaption: false,
),
);
}

@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
leading: FlatButton(
child: new Icon(
Icons.arrow_back_ios,
color: Colors.yellow,
),
onPressed: () {
Navigator.pop(context);
},
),
actions: [
// IconButton(
// icon: Icon(Icons.share, color: Colors.yellow),
// onPressed: () {},
// ),
FlatButton(
child: Icon(FontAwesomeIcons.bible, color: Colors.yellow),
onPressed: _showModelSheet,
),
],
elevation: 0.0,
backgroundColor: Colors.grey[800],
),
body: ListView(children: [
YoutubePlayer(
controller: _controller,
showVideoProgressIndicator: true,
onReady: () {
print('Player is ready.');
},
),

    ]),
    backgroundColor: Colors.black,
  ),
);

}
}

I faced this bug also. Waiting for the fix

~Having the same issue. I also made sure to use YoutubePlayerBuilder. I still get that Appbar issue when in full screen mode.~

UPDATE: Found the issue. The documentation is partly to blame as it does not clearly mention that if you use an Appbar, then you have to wrap your entire Scaffold within the YoutubePlayerBuilder.

player.dart

class VideoPage extends StatelessWidget {
  final String title;
  final String videoId;

  VideoPage({
    this.title,
    this.videoId,
  });

  @override
  Widget build(BuildContext context) {
    final YoutubePlayerController controller = YoutubePlayerController(
      initialVideoId: videoId,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        hideThumbnail: false,
      ),
    );

    return YoutubePlayerBuilder(
      player: YoutubePlayer(controller: controller),
      builder: (_, Widget player) {
        return Scaffold(
          appBar: buildAppBar(
            context: context,
            title: title,
          ),
          body: player,
        );
      },
    );
  }
}

UPDATE 2: @sarbagyastha, might want to clarify that in the docs. Thanks.

~Having the same issue. I also made sure to use YoutubePlayerBuilder. I still get that Appbar issue when in full screen mode.~

UPDATE: Found the issue. The documentation is partly to blame as it does not clearly mention that if you use an Appbar, then you have to wrap your entire Scaffold within the YoutubePlayerBuilder.

player.dart

class VideoPage extends StatelessWidget {
  final String title;
  final String videoId;

  VideoPage({
    this.title,
    this.videoId,
  });

  @override
  Widget build(BuildContext context) {
    final YoutubePlayerController controller = YoutubePlayerController(
      initialVideoId: videoId,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        hideThumbnail: false,
      ),
    );

    return YoutubePlayerBuilder(
      player: YoutubePlayer(controller: controller),
      builder: (_, Widget player) {
        return Scaffold(
          appBar: buildAppBar(
            context: context,
            title: title,
          ),
          body: player,
        );
      },
    );
  }
}

UPDATE 2: @sarbagyastha, might want to clarify that in the docs. Thanks.

Thank you man, that worked. I still have the BottomNavigationBar showing at the bottom from the main.dart but I think that is another problem.

@lucasagazzani, can you please share the complete code? I am trying the example app, currently, I see that it comes back to portrait mode as soon as I click the full-screen mode.

I am also getting the same issue when I click the full-screen mode button it automatically switched to portrait mode within a few seconds. It happens for example android app also.

@vinothvino42 This is caused by the layout builder

Was this page helpful?
0 / 5 - 0 ratings