Flutter: Loading an IFrame from WebView

This might do what you want

 Container(
    child: WebView(
      initialUrl: Uri.dataFromString('<html><body><iframe src="https://www.youtube.com/embed/abc"></iframe></body></html>', mimeType: 'text/html').toString(),
      javascriptMode: JavascriptMode.unrestricted,
    )),

This passes a data URL that contains a HTML page with an iframe.


Based on @Günter above i had slight adjustments cause i couldnt get it to work on ios. This is based of the webview_flutter official pub.dev page.

String html = """<!DOCTYPE html>
          <html>
            <head>
            <style>
            body {
              overflow: hidden; 
            }
        .embed-youtube {
            position: relative;
            padding-bottom: 56.25%; 
            padding-top: 0px;
            height: 0;
            overflow: hidden;
        }

        .embed-youtube iframe,
        .embed-youtube object,
        .embed-youtube embed {
            border: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        </style>

        <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">
           </head>
          <body bgcolor="#121212">                                    
        <div class="embed-youtube">
         <iframe
          id="vjs_video_3_Youtube_api"
          style="width:100%;height:100%;top:0;left:0;position:absolute;"
          class="vjs-tech holds-the-iframe"
          frameborder="0"
          allowfullscreen="1"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          webkitallowfullscreen mozallowfullscreen allowfullscreen
          title="Live Tv"
          frameborder="0"
          src="$iframeUrl"
          ></iframe></div>
          </body>                                    
        </html>
  """;
final Completer<WebViewController> _controller =
    Completer<WebViewController>();
final String contentBase64 =
    base64Encode(const Utf8Encoder().convert(html));
return WebView(
  initialUrl: 'data:text/html;base64,$contentBase64',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
  onPageStarted: (String url) {
    print('Page started loading: $url');
  },
  onPageFinished: (String url) {
    print('Page finished loading: $url');
  },
  gestureNavigationEnabled: true,
);

I then used @Lorenzo Pichilli answer to do it on android. I worked a bit faster for me. Hope this helps anyone. Took me a whole day.

PS

This has allowed me to play both youtube and vimeo videos on Android and iOS. Works okay so far

EDIT:

To add a loader before the webview finishes loading check out this question on how to add a progress circular indicator

Tags:

Android

Webview

Flutter

Recent Posts