Skip to content

[WebView] can't fullscreen html5 video inside iframe #27101

Closed
flutter/packages
#3879
Closed
[WebView] can't fullscreen html5 video inside iframe#27101
flutter/packages
#3879
Labels
P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilitycustomer: crowdAffects or could affect many people, though not necessarily a specific customer.found in release: 3.10Found to occur in 3.10found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: webviewThe WebView pluginpackageflutter/packages repository. See also p: labels.platform-androidAndroid applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-androidOwned by Android platform teamtriaged-androidTriaged by Android platform team

Description

@karnadii
karnadii
opened on Jan 25, 2019

Cannot make html5 video fullscreen. if i open the link in chrome outside the app i can make it fullscreen. but inside the WebView I can't.

 <iframe sandbox="allow-scripts"  src="$url" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>

example link https://gdriveplayer.us/embed2.php?link=NksVbV3wF7dgidJzFWOOIATl%2BxtRZ0XsQZYYOUGdnXgUM6ZTPaxF7TqSGGx1NDwPJC3uobQ%2BbVRo42sF3nSdXSvQzZh8YSYyHu5Hpcpp4f%2Fc1qgjQDnVxEIwIdF6NjNrppP7%2BCi1s8IqCnTpVJMj27XzzphUmrWV6%2FcZDXtOr%2BqzuEdB8jnDu%2B%2BPWroyVZj%2F02J92IIzEfkyxE02N4Q4vg

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Title"),
      ),
      body: 
          Container(          
            color: Colors.black,
            child: episode!=null?
            WebView(
              initialUrl: 'http://0.0.0.0:8082?url='+episode.streamUrl,
              javascriptMode: JavascriptMode.unrestricted,
            ):Text('Loading'),
          )
        
      
    );

Activity

  1. zoechi
    added
    plugin
    p: first party
    p: webviewThe WebView plugin
    on Jan 27, 2019
  2. zoechi
    added this to the milestone on Jan 27, 2019

  3. insinfo commented on Jun 12, 2019

    @insinfo
    insinfo
    on Jun 12, 2019

    I'm having the same problem with embedded YouTube videos

    buildVideo(Atracao atracao) {
    return Container(
      //color: Color.fromRGBO(20, 20, 20, 1),
      padding: EdgeInsets.fromLTRB(10, 10, 10, 20),
      width: screenSize.width,
      height: 200,
      child: WebView(javascriptMode: JavascriptMode.unrestricted,
        initialUrl: '',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _controller.loadUrl( Uri.dataFromString(
              '''
              <html>
              <body style="width:100%;height:100%;display:block;background:black;">
              <iframe width="100%" height="100%" 
              style="width:100%;height:100%;display:block;background:black;"
              src="https://www.youtube.com/embed/${Utils.convertYouTubeUrlToId(atracao?.video)}" 
              frameborder="0" 
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
               allowfullscreen="allowfullscreen"
                mozallowfullscreen="mozallowfullscreen" 
                msallowfullscreen="msallowfullscreen" 
                oallowfullscreen="oallowfullscreen" 
                webkitallowfullscreen="webkitallowfullscreen"
               >
              </iframe>
              </body>
              </html>
              ''',
              mimeType: 'text/html',
              encoding: Encoding.getByName('utf-8')
          ).toString());
        },
      ),
    );
}

  4. mccreeper98 commented on Aug 28, 2019

    @mccreeper98
    mccreeper98
    on Aug 28, 2019

    any solution??

  5. marcosgallardo commented on Aug 31, 2019

    @marcosgallardo
    marcosgallardo
    on Aug 31, 2019

    How about allowing video fullscreen into a <video> tag?

    @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: WebView(
          initialUrl: '',
          onWebViewCreated: (WebViewController webViewController) {
            setState(() {
              _controller = webViewController;
              _controller.loadUrl(Uri.dataFromString(
                '''
                  <!DOCTYPE html>
                  <html lang='en'>
                  <head>
                    <style>
                      html, body { margin: 0; padding: 0; background-color: black; overflow: hidden; text-align: center; }
                      video { height: 100vh; }
                    </style>
                  </head>
                  <body>
                    <video controls id="video" width="100%" src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"></video>
                  </body>
                  </html>
                  ''',
                mimeType: 'text/html',
                encoding: Encoding.getByName('utf-8'),
              ).toString());
            });
          },
        ),
      ),
    );
  }

  6. PetrusVermaak commented on Nov 2, 2019

    @PetrusVermaak
    PetrusVermaak
    on Nov 2, 2019

    Same issue for embedding fb live stream videos. It works in native browser, but not inside flutter webview. Any idea how to resolve this?

  7. iapicca
    added
    customer: crowdAffects or could affect many people, though not necessarily a specific customer.
    on Nov 25, 2019

  8. pichillilorenzo commented on Nov 27, 2019

    @pichillilorenzo
    pichillilorenzo
    on Nov 27, 2019

    You can try my plugin flutter_inappbrowser (EDIT: it has been renamed to flutter_inappwebview).

    An example of a WebView loading a local file from the assets folder (see more here):

    child: InAppWebView(
  initialFile: "assets/index.html",
  initialHeaders: {},
  initialOptions: InAppWebViewWidgetOptions(
    inAppWebViewOptions: InAppWebViewOptions(
        debuggingEnabled: true,
    )
  ),
  onWebViewCreated: (InAppWebViewController controller) {
    webView = controller;
  },
  onLoadStart: (InAppWebViewController controller, String url) {

  },
  onLoadStop: (InAppWebViewController controller, String url) {

  },
  onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
    print("console message: ${consoleMessage.message}");
  },
),

    The index.html file with your iframe:

    <!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Flutter InAppBrowser</title>
    </head>
    <body>
        <iframe sandbox="allow-scripts" src="https://gdriveplayer.us/embed2.php?link=NksVbV3wF7dgidJzFWOOIATl%2BxtRZ0XsQZYYOUGdnXgUM6ZTPaxF7TqSGGx1NDwPJC3uobQ%2BbVRo42sF3nSdXSvQzZh8YSYyHu5Hpcpp4f%2Fc1qgjQDnVxEIwIdF6NjNrppP7%2BCi1s8IqCnTpVJMj27XzzphUmrWV6%2FcZDXtOr%2BqzuEdB8jnDu%2B%2BPWroyVZj%2F02J92IIzEfkyxE02N4Q4vg" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    </body>
</html>

    Or using initialData if you want load html from flutter without using a local file:

    ...

String iframeUrl = "https://gdriveplayer.us/embed2.php?link=NksVbV3wF7dgidJzFWOOIATl%2BxtRZ0XsQZYYOUGdnXgUM6ZTPaxF7TqSGGx1NDwPJC3uobQ%2BbVRo42sF3nSdXSvQzZh8YSYyHu5Hpcpp4f%2Fc1qgjQDnVxEIwIdF6NjNrppP7%2BCi1s8IqCnTpVJMj27XzzphUmrWV6%2FcZDXtOr%2BqzuEdB8jnDu%2B%2BPWroyVZj%2F02J92IIzEfkyxE02N4Q4vg";

...

child: InAppWebView(
  initialData: InAppWebViewInitialData(
    data: """
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Flutter InAppBrowser</title>
    </head>
    <body>
        <iframe sandbox="allow-scripts" src="$iframeUrl" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    </body>
</html>"""
  ),
  initialHeaders: {},
  initialOptions: InAppWebViewWidgetOptions(
    inAppWebViewOptions: InAppWebViewOptions(
        debuggingEnabled: true,
    )
  ),
  onWebViewCreated: (InAppWebViewController controller) {
    webView = controller;
  },
  onLoadStart: (InAppWebViewController controller, String url) {

  },
  onLoadStop: (InAppWebViewController controller, String url) {

  },
  onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
    print("console message: ${consoleMessage.message}");
  },
),

  9. maltub9 commented on Dec 3, 2019

    @maltub9
    maltub9
    on Dec 3, 2019

    You can try my plugin flutter_inappbrowser (EDIT: it has been renamed to flutter_inappwebview).

    An example of a WebView loading a local file from the assets folder (see more here):

    child: InAppWebView(
  initialFile: "assets/index.html",
  initialHeaders: {},
  initialOptions: InAppWebViewWidgetOptions(
    inAppWebViewOptions: InAppWebViewOptions(
        debuggingEnabled: true,
    )
  ),
  onWebViewCreated: (InAppWebViewController controller) {
    webView = controller;
  },
  onLoadStart: (InAppWebViewController controller, String url) {

  },
  onLoadStop: (InAppWebViewController controller, String url) {

  },
  onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
    print("console message: ${consoleMessage.message}");
  },
),

    The index.html file with your iframe:

    <!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Flutter InAppBrowser</title>
    </head>
    <body>
        <iframe sandbox="allow-scripts" src="https://gdriveplayer.us/embed2.php?link=NksVbV3wF7dgidJzFWOOIATl%2BxtRZ0XsQZYYOUGdnXgUM6ZTPaxF7TqSGGx1NDwPJC3uobQ%2BbVRo42sF3nSdXSvQzZh8YSYyHu5Hpcpp4f%2Fc1qgjQDnVxEIwIdF6NjNrppP7%2BCi1s8IqCnTpVJMj27XzzphUmrWV6%2FcZDXtOr%2BqzuEdB8jnDu%2B%2BPWroyVZj%2F02J92IIzEfkyxE02N4Q4vg" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    </body>
</html>

    Or using initialData if you want load html from flutter without using a local file:

    ...

String iframeUrl = "https://gdriveplayer.us/embed2.php?link=NksVbV3wF7dgidJzFWOOIATl%2BxtRZ0XsQZYYOUGdnXgUM6ZTPaxF7TqSGGx1NDwPJC3uobQ%2BbVRo42sF3nSdXSvQzZh8YSYyHu5Hpcpp4f%2Fc1qgjQDnVxEIwIdF6NjNrppP7%2BCi1s8IqCnTpVJMj27XzzphUmrWV6%2FcZDXtOr%2BqzuEdB8jnDu%2B%2BPWroyVZj%2F02J92IIzEfkyxE02N4Q4vg";

...

child: InAppWebView(
  initialData: InAppWebViewInitialData(
    data: """
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Flutter InAppBrowser</title>
    </head>
    <body>
        <iframe sandbox="allow-scripts" src="$iframeUrl" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    </body>
</html>"""
  ),
  initialHeaders: {},
  initialOptions: InAppWebViewWidgetOptions(
    inAppWebViewOptions: InAppWebViewOptions(
        debuggingEnabled: true,
    )
  ),
  onWebViewCreated: (InAppWebViewController controller) {
    webView = controller;
  },
  onLoadStart: (InAppWebViewController controller, String url) {

  },
  onLoadStop: (InAppWebViewController controller, String url) {

  },
  onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
    print("console message: ${consoleMessage.message}");
  },
),

    I tried your plugin. but I got error :
    uses-sdk:minSdkVersion 16 cannot be smaller than version 17 declared in library

  10. pichillilorenzo commented on Dec 3, 2019

    @pichillilorenzo
    pichillilorenzo
    on Dec 3, 2019

    @maltub9 as specified in the main page of the repository (here) and in the official documentation (here), you need to update the minSdkVersion of your android/app/build.gradle file to at least 17.
    Also, you need to add <uses-permission android:name="android.permission.INTERNET"/> in the android/app/src/main/AndroidManifest.xml file in order to give minimum permission to perform network operations in your application.

  11. maltub9 commented on Dec 4, 2019

    @maltub9
    maltub9
    on Dec 4, 2019

    @maltub9 as specified in the main page of the repository (here) and in the official documentation (here), you need to update the minSdkVersion of your android/app/build.gradle file to at least 17.
    Also, you need to add <uses-permission android:name="android.permission.INTERNET"/> in the android/app/src/main/AndroidManifest.xml file in order to give minimum permission to perform network operations in your application.

    Thank you for reply. I fixed the problem. and your plugin successfully showed the fullscreen button. but once I clicked on the full screen button the app crushed.

  12. pichillilorenzo commented on Dec 4, 2019

    @pichillilorenzo
    pichillilorenzo
    on Dec 4, 2019

    @maltub9 open an issue on the plugin repository with error logs, etc.

  13. saklani commented on Dec 18, 2019

    @saklani
    saklani
    on Dec 18, 2019 · Hidden as off-topic

  14. 67 remaining items

  15. exaby73
    added
    found in release: 3.10Found to occur in 3.10
    on Apr 17, 2023

  16. Prabesh01 commented on Jun 30, 2023

    @Prabesh01
    Prabesh01
    on Jun 30, 2023

    why is mere Fullscreen not supported yet!?

    in my website, i have this js code for fullscreen which works everywhere else but doesnt work on flutter_webview:

    function openFullscreen() {
  if (document.body.requestFullscreen) {
    document.body.requestFullscreen();
  } else if (document.body.webkitRequestFullscreen) {
    document.body.webkitRequestFullscreen();
  } else if (document.body.msRequestFullscreen) {
    document.body.msRequestFullscreen();
  }
}
  17. flutter-triage-bot
    added
    packageflutter/packages repository. See also p: labels.
    on Jul 5, 2023
  18. Hixie
    removed
    plugin
    on Jul 6, 2023
  19. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-androidOwned by Android platform team
    triaged-androidTriaged by Android platform team
    on Jul 8, 2023
  20. auto-submit
    closed this as completedin packages#3879on Sep 8, 2023
  21. auto-submit
    added a commit that references this issue on Sep 8, 2023

    [webview_flutter_android] Added the functionality to fullscreen html5…

    3800f6d
  22. darshankawar
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Sep 11, 2023

  23. github-actions commented on Sep 25, 2023

    @github-actions
    github-actionsbot
    on Sep 25, 2023

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  24. github-actions
    locked as resolved and limited conversation to collaborators on Sep 25, 2023
  25. stuartmorgan-g
    marked [webview_flutter] fullscreen for youtube not working #45464 as a duplicate of this issue on Jul 29, 2025
  26. creatorpiyush
    added a commit that references this issue on Jun 10, 2026

    [webview_flutter_android] Added the functionality to fullscreen html5…

    0aed7c3
  27. bisor0627
    added a commit that references this issue on Jun 19, 2026

    [webview_flutter_android] Added the functionality to fullscreen html5…

    99d22cc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilitycustomer: crowdAffects or could affect many people, though not necessarily a specific customer.found in release: 3.10Found to occur in 3.10found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: webviewThe WebView pluginpackageflutter/packages repository. See also p: labels.platform-androidAndroid applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-androidOwned by Android platform teamtriaged-androidTriaged by Android platform team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions