Full Screen in Landscape mode cut the video

[techiapp]

Many users reported this problem but problem still there.

[caldart]

Many users reported this problem but problem still there.

Hi, i kinda made work changing the base code, I did this way: Edit file: youtube_player_builder.dart Original:

Edited:

[caldart]

Many users reported this problem but problem still there.

Hi, i kinda made work changing the base code, I did this way: Edit file: youtube_player_builder.dart Original:

Edited:

I made another modification, on youtube_player.dart, because i got some issues with the size when the videos was playing, so i fixed the scale to 1, or you can remove the Transform.scale as you wish.

[alexaung]

Hi, My issue is as following. It is showing very small at the bottom but it is not always happened.

[caldart]

I'm not so expert, but let's see if we can fix that. Can you put some part of your code? Where you're using youtube?

[caldart]

I'm not so expert, but let's see if we can fix that. Can you put some part of your code? Where you're using youtube?

Em seg., 11 de abr. de 2022 às 15:51, alexaung @.***> escreveu:

Hi, My issue is as following. It is showing very small at the bottom but it is not always happened. [image: fuscreen_not_showing] https://user-images.githubusercontent.com/1129760/162808919-a6169666-70d6-4b84-a763-d21ece4b64e9.jpg

— Reply to this email directly, view it on GitHub https://github.com/sarbagyastha/youtube_player_flutter/issues/621#issuecomment-1095432200, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASLTIDWLR4V2PK7PSWCIGFDVERYDZANCNFSM5RRPX74A . You are receiving this because you commented.Message ID: @.***>

[alexaung]

Here is my youtube screen. my youtube id come from api.

import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:thitsarparami/blocs/bloc.dart'; import 'package:thitsarparami/helper/constants.dart'; import 'package:thitsarparami/helper/enum.dart'; import 'package:thitsarparami/ui/error/something_went_wrong.dart'; import 'package:thitsarparami/widgets/circular_progress_indicator_widget.dart'; import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class VideoScreen extends StatefulWidget {
  static const routeName = '/video';
  const VideoScreen({Key? key}) : super(key: key);

  @override
  _VideoScreenState createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
   @override
  void initState() {
    super.initState();
    _loadYoutube();
  }

  _loadYoutube() async {
    List<String> codes = [
      systemDataCodeToString(SystemDataCode.youtube_live),
    ];
    BlocProvider.of<SystemDataBloc>(context).add(GetYoutubeLiveEvent(codes));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        elevation: 0,
        title: AutoSizeText(
          kYouTubeChannel,
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
      icon: Icon(
        Icons.arrow_back,
        color: Theme.of(context).primaryIconTheme.color!,
      ),
    ),
  ),
  body: BlocBuilder<SystemDataBloc, SystemDataState>(
    builder: (context, state) {
      if (state is SystemDataError) {
        return const SomethingWentWrongScreen();
      } else if (state is YoutubeLiveDataLoaded) {
        return Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            MyYoutubePlayer(
              videoId: state.systemData.youtubeLive!.videoId!,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                state.systemData.youtubeLive!.videoTitle!,
                style: const TextStyle(
                    color: Colors.black,
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        );
        
      }
      return const CircularProgressIndicatorWidget();
    },
  ),
);
  }
}

class MyYoutubePlayer extends StatefulWidget {
  final String videoId;
  const MyYoutubePlayer({Key? key, required this.videoId}) : super(key: key);

  @override
  State<MyYoutubePlayer> createState() => _MyYoutubePlayerState();
 }

class _MyYoutubePlayerState extends State<MyYoutubePlayer> {
  late YoutubePlayerController _controller;
  @override
  void initState() {
super.initState();
_controller = YoutubePlayerController(
  initialVideoId: widget.videoId,
  params: const YoutubePlayerParams(
    showControls: true,
    showFullscreenButton: true,
    desktopMode: false,
    privacyEnhanced: true,
    useHybridComposition: true,
  ),
);
_controller.onEnterFullscreen = () {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]);
};
_controller.onExitFullscreen = () {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
};

}

  @override
  void dispose() {
    _controller.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
return YoutubePlayerIFrame(
  controller: _controller,
  aspectRatio: 16 / 9,
);
  }
}

[caldart]

I'm gonna check it out. But one thing you can test, it is trying to remove your aspect ratio, because, for me, that didn't work.

[alexaung]

it is same even take out the aspectRation because it is default. Anyway for me it is only happen sometime but my client does not like it. So I use [https://pub.dev/packages/pod_player](pod_player: ^0.0.2). It is working for both ios and android. For web, I haven't test it out.

[caldart]

Hi, by what i checked there is 2 types from the same repository youtube_player_iframe and youtube_player_flutter. In my case, I've been using the last one (youtube_player_flutter), but it has no web support. I think probably it is an error on the original code, but i don't know where it could be that.

In my case, since i use "youtube_player_flutter", i didn't get that kind of issue.

[alexaung]

Yes, it is same repo with different project. I they we should not use it since they don't support. I am looking for another alternative. Pod_Player does not support live streaming video.

[caldart]

Yes, it is same repo with different project. I they we should not use it since they don't support. I am looking for another alternative. Pod_Player does not support live streaming video.

Yeah, it will be the better option for us. I will try Pod_player, thanks for the tip!! But if I get any idea of what could be the problem if youtube_player I send to you.

Tks

[Suheb786]

That works for me wrap with YoutubePlayerBuilder and in builder add ur UI components :

YoutubePlayerBuilder( player: YoutubePlayer( controller: controller, showVideoProgressIndicator: false, bufferIndicator: Container(), progressIndicatorColor: AppColor.sideNavBarLeftGradient, progressColors: ProgressBarColors( playedColor: AppColor.sideNavBarRightGradient, handleColor: AppColor.sideNavBarRightGradient), onReady: () { // model.playVideoSubject.add(true); // controller.addListener(listener); }, ), onExitFullScreen: () { log("cinema mode"); SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); }, onEnterFullScreen: () { log("full screen mode"); SystemChrome.setPreferredOrientations( [DeviceOrientation.landscapeLeft]); }, builder: (context, player) { return Column( children: [ Expanded( flex: 6, child: appHeader(context, coinDashBoardUIManager)), Expanded( flex: 40, child: _newVideoPlayer( coinDashBoardUIManager, context, model, player)), Expanded( flex: 54, child: _moreVideosList(context, coinDashBoardUIManager, model)) ], ); });

[MAlazhariy]

I have a similar issue. The video is shown as BoxFit.cover so the video is cropped. It must be like BoxFit.contain in the full-screen mode.

[peterweb2005]

made workaround, seems ok

https://github.com/peterweb2005/youtube_player_flutter/tree/fullscreen-landscape