Flutter WebView exit fullscreen YouTube video issue: black screen with watch later and share buttons

Question

I have a Flutter app that can show YouTube videos inside WebView. It works ok, except in one case: if you open it fullscreen and that pres=s embedded "exit from fullscreen" button in YouTube player: after exiting from fullscreen I still hear the sound, but I see a black screen with button share and watch later. In case when I exit from fullscreen mode by pressing the android back button it works ok. Ho to fix it?

  Widget build(BuildContext context) {

    return  Container(
            child: MyWebView(
              initUrl:
                  'https://www.youtube.com/embed/${id}?autoplay=1&rel=0&showinfo=0',
            ),
          )
  }


import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class MyWebView extends StatefulWidget {
  final String initUrl;

  MyWebView({
    this.initUrl,
  });

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


class MyWebViewState extends State<MyWebView> {
  InAppWebViewController webView;
  String url;
  bool webLoadError = false;

  @override
  void initState() {
    url = widget.initUrl;
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        InAppWebView(
          initialUrl: url,
          initialHeaders: widget.headers,
          initialOptions: InAppWebViewGroupOptions(
            crossPlatform: InAppWebViewOptions(
              debuggingEnabled: true,
              useShouldOverrideUrlLoading: true,
              clearCache: true,
              mediaPlaybackRequiresUserGesture: false,
            ),
          ),
          onLoadStart: (controller, string) {
            setState(() {
              webView = controller;
              webLoadError = false;
            });
          },
    );
  }
}

Solution

If you put in your code, maybe I could help you more. Maybe the reason is a video still not ready when you show it. You can check with _controller.value.initialized, when a video is not ready to return Container() code snippet:

return Center(
  child: _controller.value.initialized
      ? AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        )
      : Container(),
);

Or if you use webview remove these lines from the application tag.

android:hardwareAccelerated="false"

android:largeHeap="true"

Comments

[Abbas Jafari]

Did you get your answer?

[anber]

@abbasjafary nope, I tried all suggestions but the issue is still present. Is there any way to recalculate WebView layout without pausing video?

[Abbas Jafari]

No sorry my friend

[anber]

android:hardwareAccelerated is true and I dont use largeHeap option

[Abbas Jafari]

Insert this in scaffold: resizeToAvoidBottomInset: false

[anber]

Looks like I found the solution: I added custom user agent for webview Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36. Looks like it force HD resolution for youtube video and this somehow helps.

[Abbas Jafari]

Wow fantastic I was so happy