<iframe> doesn't work on IOS 12

[chymchym1905]

Steps to Reproduce

class VideoScreen extends StatelessWidget {
  const VideoScreen({super.key, required this.id, required this.metadata, required this.videos});
  final String id;
  final VideoMetadata metadata;
  final List<VideoMetadata> videos;

  @override
  Widget build(BuildContext context) {
    final html =
        '''<iframe width="${MediaQuery.of(context).size.width}" src="https://www.youtube.com/embed/${metadata.id}" title="${metadata.title}" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>''';
    return Scaffold(
      appBar: AppBar(
        title: const Text('Video'),
      ),
      body: Column(
        children: [
          HtmlWidget(html),
          ...videos.map((video) => GestureDetector(
              onTap: () {
                context.replace(Routes.video(video.id), extra: VideoRouteData(metadata: video));
              },
              child: Container(color: Colors.blue, child: Text(video.title)))),
        ],
      ),
    );
  }
}

Tesing environment

[!] Flutter (Channel [user-branch], 3.24.5, on macOS 13.6.4 22G513 darwin-x64, locale en-US)
    ! Flutter version 3.24.5 on channel [user-branch] at /Users/chym/Development/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
    • Framework revision dec2ee5c1f (5 months ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc3)
    • Android SDK at /Users/chym/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0-rc3
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.99.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.108.0

[✓] Connected device (3 available)
    • chymchym (mobile) • a1e11a41a0f0a7348db11fadcf5437eb404463cd • ios            • iOS 12.5.7 16H81
    • macOS (desktop)   • macos                                    • darwin-x64     • macOS 13.6.4 22G513 darwin-x64
    • Chrome (web)      • chrome                                   • web-javascript • Brave Browser 135.1.77.100
    ! Error: Browsing on the local area network for ###. Ensure the device is unlocked and attached with a cable or associated with the same local area
      network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Expected results

Video render properly

Actual results

[fwfh_webview] Ignored controller error
[fwfh_webview] PlatformException (PlatformException(FWFUnsupportedVersionError, `WKWebView.inspectable` requires iOS 16.4, macOS 13.3., null, null))
[fwfh_webview] #0      UIViewWKWebView.setInspectable (package:webview_flutter_wkwebview/src/common/web_kit.g.dart:5740:7)
               <asynchronous suspension>
               #1      WebViewState._initController (package:fwfh_webview/src/web_view/io.dart:94:7)
io.dart:94
               <asynchronous suspension>
[fwfh_webview] Ignored controller error
[fwfh_webview] PlatformException (PlatformException(FWFEvaluateJavaScriptError, Failed evaluating JavaScript., Instance of 'NSError', null))
[fwfh_webview] #0      UIViewWKWebView.evaluateJavaScript (package:webview_flutter_wkwebview/src/common/web_kit.g.dart:5709:7)
               <asynchronous suspension>
               #1      WebKitWebViewController.runJavaScript (package:webview_flutter_wkwebview/src/webkit_webview_controller.dart:502:7)
webkit_webview_controller.dart:502
               <asynchronous suspension>
               #2      _ResizeObserver.observe (package:fwfh_webview/src/web_view/io.dart:235:5)
io.dart:235
               <asynchronous suspension>

Any clue on how to work around this?

[daohoangson]

iOS 12 is quite old and according to your screenshot, the webview worked and was showing the "Watch on YouTube" button. The video may have problem playing because of the old operating system. Can you try open the same link on Safari?

[chymchym1905]

Youtube links work fine on my Safari browser. Maybe i shouldn't think of IOS 12 in the first place.