youtube_player_flutter stuck in infinite loading flutter

I'm trying to add some youtube videos to my flutter webpage, but the video is stuck in infinite loading.

I am using:

youtube_player_flutter: ^8.1.0

Here is the class I'm using to add a youtube video:

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

class AddYoutubeVideo extends StatefulWidget {
  final String videoUrl;
  const AddYoutubeVideo({Key? key, required this.videoUrl}) : super(key: key);

  @override
  State<AddYoutubeVideo> createState() => _AddYoutubeVideoState();
}

class _AddYoutubeVideoState extends State<AddYoutubeVideo> {
  late YoutubePlayerController _youtubeController;

  @override
  void initState() {
    _youtubeController = YoutubePlayerController(
      initialVideoId: YoutubePlayer.convertUrlToId(widget.videoUrl)!,
      flags: const YoutubePlayerFlags(
        autoPlay: false,
        loop: false,
        controlsVisibleAtStart: true,
      ),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: YoutubePlayer(
        controller: _youtubeController,
        liveUIColor: Colors.amber,
      ),
    );
  }
}

And then I'm the youtube class in this class:

class MediaPage extends StatefulWidget {
  const MediaPage({Key? key}) : super(key: key);

  @override
  State<MediaPage> createState() => _MediaPageState();
}

class _MediaPageState extends State<MediaPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                const CommonNavigationBar(),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 0.1 * MediaQuery.of(context).size.width,
                      height: 0.1 * MediaQuery.of(context).size.height,
                    ),
                    const Text('Live Sets',
                        style: TextStyle(
                          fontSize: 40.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ))
                  ],
                ),
                SizedBox(
                  width: 0.7 * MediaQuery.of(context).size.width,
                  height: 0.4 * MediaQuery.of(context).size.height,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        width: 0.05 * MediaQuery.of(context).size.width,
                      ),
                      const AddYoutubeVideo(
                          videoUrl: 'https://www.youtube.com/watch?v=y6120QOlsfU'),
                      SizedBox(
                        width: 0.05 * MediaQuery.of(context).size.width,
                      ),
                      const AddYoutubeVideo(
                          videoUrl: 'https://www.youtube.com/watch?v=y6120QOlsfU'),
                      SizedBox(
                        width: 0.05 * MediaQuery.of(context).size.width,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          const BottomNavBar(),
        ],
      ),
    );
  }
}

Is there something I'm doing wrong while using the youtube_player, or something else I could try?

Image showing loading videos

The solution was to use youtube_player_iframe instead of youtube_player_flutter because youtube_player_flutter is not supported for flutter web.