Menu
I am looking for a way to load an iFrame from Flutter WebView ( webview_flutter: ^0.1.2), and couldn't find any relevant info.
Container(
child: WebView(
initialUrl: 'https://www.youtube.com/embed/abc',
javaScriptMode: JavaScriptMode.unrestricted,
)),
Any idea how to pass IFrame to Webview, will it be as part of initialUrl?, I have tried the same, but it didn't load properly.
668
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.
74
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
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
