[webview_flutter]: Exit FullScreen on IOS pause the iframe video

[hbedford]

Steps to reproduce

1 - Clone my repository and build on IOS with version flutter 3.16.0. https://github.com/hbedford/webviewiframe.git 2 - Tap on play video of youtube. 3 - Open fullscreen and close fullscreen.

Expected results

Continue with vídeo playing when close the full screen with iFrame YouTube or Vimeo or others .

Actual results

The video will pause when is closed the fullscreen.

Code sample

Code sample

```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); runApp(const App()); } class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: SafeArea(child: HomeScreen()), ), ); } } class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { WebViewController? _controller; String htmlData = ""; loadHtml() { htmlData = """

"""; } @override void initState() { super.initState(); load(); } PlatformWebViewControllerCreationParams getParams() { if (WebViewPlatform.instance is WebKitWebViewPlatform) { return WebKitWebViewControllerCreationParams( allowsInlineMediaPlayback: true, limitsNavigationsToAppBoundDomains: false, mediaTypesRequiringUserAction: const {}); } return const PlatformWebViewControllerCreationParams(); } void load() { loadHtml(); PlatformWebViewControllerCreationParams params = getParams(); WebViewController controller = WebViewController.fromPlatformCreationParams(params) ..loadHtmlString(htmlData) ..setJavaScriptMode(JavaScriptMode.unrestricted); _controller = controller; setState(() {}); } @override Widget build(BuildContext context) { if (_controller == null) { return const Center( child: CircularProgressIndicator( color: Colors.blue, ), ); } return Column( children: [ const Text( 'WebView_Flutter', style: TextStyle(color: Colors.black), ), const SizedBox(height: 24), Expanded( child: WebViewWidget(controller: _controller!), ), ], ); } } ```

Screenshots or Video

https://github.com/flutter/flutter/assets/36144175/f1ad47ea-855d-47f4-ba3b-6656757b958d

Logs

Logs

```console ```

Flutter Doctor output

Doctor output

```console Doctor summary (to see all details, run flutter doctor -v): [!] Flutter (Channel stable, 3.16.0, on macOS 14.2.1 23C71 darwin-x64, locale pt-BR) ! Warning: dart on your path resolves to /usr/local/Cellar/dart/2.18.6/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/hugobedford/fvm/versions/3.16.0. Consider adding /Users/hugobedford/fvm/versions/3.16.0/bin to the front of your path. [!] Android toolchain - develop for Android devices (Android SDK version 33.0.2) ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] IntelliJ IDEA Community Edition (version 2023.3.4) [✓] VS Code (version 1.81.1) [✓] Connected device (3 available) [✓] Network resources ! Doctor found issues in 2 categories. ```

[danagbemava-nc]

This behaviour is not specific to the flutter webview. I used this app to open this link link which contains an iframe with a video and the same behaviour occured. Do you have any example of this working as you are expecting it to that you can share?

[hbedford]

Edited the issue with new example of iframe showing the exit fullscreen pausing the video and where in this answer with the example without pausing the video. Repository with lib InAppWebView ->https://github.com/hbedford/inappwebviewexample/

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  String get html => """
   <!DOCTYPE html>
    <html>

    <head>
      <style>
        body {
          margin:0 auto;
          overflow: hidden;
        }

        .embed-iframe {
          position: relative;
          padding-bottom: 56.25%;
          padding-top: 0px;
          padding-left: 0px;
          padding-right: 0p;
          margin: 0 auto;
          height: 100%;
          overflow: hidden;
        }

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

      <meta charset="UTF-8">
      <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=0.8, maximum-scale=0.8, minimum-scale=0.8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
      <div class="embed-iframe">
        <iframe src="https://player.scaleup.com.br/embed/510c42b9fde8af543194ea9fdc0296149cc5a1a5"
          title=""
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; autoplay; muted;fullscreen;"
          allowfullscreen webkitallowfullscreen style="width: 100%; aspect-ratio: 16 / 9; border: 0px; margin: 0px auto; padding: 0px;"></iframe>
      </div>
      <script>

      </script>
    </body>

    </html>
  """;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const Text(
              "InAppWebView",
              style: TextStyle(color: Colors.black),
            ),
            const SizedBox(height: 24),
            Expanded(
              child: InAppWebView(
                key: const ValueKey("Teste"),
                initialSettings: InAppWebViewSettings(
                  hardwareAcceleration: true,
                  forceDark: ForceDark.OFF,
                  geolocationEnabled: false,
                  javaScriptEnabled: true,
                  allowsPictureInPictureMediaPlayback: true,
                  allowsInlineMediaPlayback: true,
                  iframeAllowFullscreen: true,
                  isElementFullscreenEnabled: true,
                ),
                initialData: InAppWebViewInitialData(
                  data: html,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Video:

https://github.com/flutter/flutter/assets/36144175/c458a667-ad85-4f50-90ed-c9349a947403

Flutter doctor ` Doctor summary (to see all details, run flutter doctor -v): [!] Flutter (Channel stable, 3.16.0, on macOS 14.2.1 23C71 darwin-x64, locale pt-BR) ! Warning: dart on your path resolves to /usr/local/Cellar/dart/2.18.6/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/hugobedford/fvm/versions/3.16.0. Consider adding /Users/hugobedford/fvm/versions/3.16.0/bin to the front of your path. [!] Android toolchain - develop for Android devices (Android SDK version 33.0.2) ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] IntelliJ IDEA Community Edition (version 2023.3.4) [✓] VS Code (version 1.81.1) [✓] Connected device (3 available) [✓] Network resources

! Doctor found issues in 2 categories. `

[danagbemava-nc]

Hi @hbedford, I meant do you have a native example that uses WkWebview that works as you expect it to? InAppWebview may be using a different webview mechanism from webview_flutter. You can try some of the webview applications in the appstore to know whether or not this is the expected behaviour.

[hbedford]

i don`t find any example native. But in appwebview use WkWebView https://pub.dev/packages/flutter_inappwebview_ios , but this lib inappwebview have problems with UI render using iframe.

[danagbemava-nc]

i don`t find any example native.

Then it would appear that this is not the default native behavior and perhaps inappwebview added some custom method to handle that case. This would mean that this is not a bug in the webview_flutter plugin.

Since this is not a bug in the plugin, I'll be closing this issue. You can file a new proposal requesting for a way to resume videos when fullscreen is exited in an iframe.

Thank you

[github-actions[bot]]

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.