Search code examples
iosflutterdart

youtube_player_iframe is not working on iOS


I want to play YouTube videos using youtube_player_iframe(5.1.2).
Android can be played on both emulators and devices without any problems. However, iOS does not display the player.
They told me to write down more details, but there's no errors or anything.
What are the causes and solutions? Thanks.

main.dart

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
            YoutubePlayerScaffold(
              controller: YoutubePlayerController.fromVideoId(
                videoId: 'jNQXAC9IVRw',
                autoPlay: true,
                params: const YoutubePlayerParams(
                  showVideoAnnotations: false,
                  strictRelatedVideos: true,
                  color: 'red',
                )
              ),
              builder: (context, player) {
                return player;
              },
            ),

          ],
        ),
      ),
    );
  }
}

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.3, on macOS 14.5 23F79 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.91.1)
[✓] Connected device (5 available)
[✓] Network resources

pod --version
1.15.2


Solution

  • Tried exactly the same code on iPhone 15 pro simulator and it worked.

    My flutter doctor output.

    flutter doctor
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, 3.22.2, on macOS 14.4 23E214 darwin-arm64, locale
        en-EE)
    [✗] Android toolchain - develop for Android devices
        ✗ Unable to locate Android SDK.
          Install Android Studio from: https://developer.android.com/studio/index.html
          On first launch it will assist you in installing the Android SDK components.
          (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for
          detailed instructions).
          If the Android SDK has been installed to a custom location, please use
          `flutter config --android-sdk` to update to that location.
    
    [✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    [✓] Chrome - develop for the web
    [!] Android Studio (not installed)
    [✓] VS Code (version 1.90.1)
    [✓] Connected device (4 available)
    [✓] Network resources
    
    gem which cocoapods
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.15.2/lib/cocoapods.rb
    

    The only thing I can suggest is to try updating Flutter and Cocapods.

    If that doesn't work. Then you can try the good old "Flutter app works on Android but doesn't work on IOS trick".

    cd ios
    flutter clean
    rm -rf Pods
    rm -rf Podfile.lock
    flutter pub get
    pod install