Rendering multiple Youtube Video on flutter web

Question

I have started to build website but using flutter. I am able to achive to render single single yt video on the page. But when I try to do so for multiple video its not getting showed. Upon investigation got to know that only 1 embed video has been binded to Dom parser. Here is my sample code below. Where assets[pageIndex] is the link i am passing. and the Iframe is responsible to show it. Please help me here and do let me know if anything else is required.Thanks in advance. Happy Diwali :)

I tried with diffrent ways in which I kept 2 diffrent video link in 2 seprate widget but still only single video is rendering.

               import 'dart:html';
                import 'dart:ui_web' as ui;
                import 'package:flutter/material.dart';

                class IframeScreen extends StatefulWidget {
                  final List<String> urlDataList;

                  IframeScreen(this.urlDataList, {Key? key}) : super(key: key);

                  @override
                  State<IframeScreen> createState() => _IframeScreenState();
                }

                class _IframeScreenState extends State<IframeScreen> {
                  late List<IFrameElement> _iframeElements;

                  @override
                  void initState() {
                    super.initState();

                    _iframeElements = List.generate(
                      widget.urlDataList.length,
                      (index) {
                        var iframeElement = IFrameElement()
                    ..src = widget.urlDataList[index]
                    ..style.border = 'none'
                    ..allowFullscreen = true;

                        // Enable JavaScript
                        iframeElement.attributes['allow'] =
                      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';

                        // Register the iframe element with a unique key using index
                        ui.platformViewRegistry.registerViewFactory(
                    'iframeElement$index',
                    (int viewId) => iframeElement,
                        );

                        print('Registered iframeElement$index: ${iframeElement.src}');

                        return iframeElement;
                      },
                    );
                  }

                  @override
                  Widget build(BuildContext context) {
                    return Column(
                      children: [
                        for (int index = 0; index < widget.urlDataList.length; index++)
                    Expanded(
                      child: Container(
                        child: HtmlElementView(
                          viewType: 'iframeElement$index',
                          key: UniqueKey(),
                        ),
                      ),
                    ),
                      ],
                    );
                  }
                }

                class YourWidget extends StatelessWidget {
                  final List<String> assets;
                  final List<String> title;

                  YourWidget({required this.assets, required this.title});

                  @override
                  Widget build(BuildContext context) {
                    var screenSize = MediaQuery.of(context).size;

                    return Scaffold(
                      body: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                    ...Iterable<int>.generate(assets.length).map(
                      (int pageIndex) => Column(
                        children: [
                          SizedBox(
                            height: screenSize.width / 6,
                            width: screenSize.width / 3.8,
                            child: InkWell(
                        onTap: () {
                          print(pageIndex);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20.0),
                            boxShadow: [
                              BoxShadow(
                                offset: Offset(0, 10),
                                blurRadius: 20,
                                spreadRadius: 5,
                                color: Colors.grey.withOpacity(0.3),
                              )
                            ],
                          ),
                          child: IframeScreen([assets[pageIndex]]),
                        ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(
                        top: screenSize.height / 70,
                            ),
                            child: Text(
                        title[pageIndex],
                        style: TextStyle(
                          fontSize: 20,
                          color: Colors.orangeAccent,
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w500,
                        ),
                            ),
                          ),
                        ],
                      ),
                    ),
                        ],
                      ),
                    );
                  }
                }

                void main() {
                  runApp(
                    MaterialApp(
                      home: YourWidget(
                        assets: ['your_video_url_1', 'your_video_url_2'],
                        title: ['Title 1', 'Title 2'],
                      ),
                    ),
                  );
                }

Answer 1

Here is the fix : need to pass unique viewType for each video , updated the IframeScreen code :

import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class IframeScreen extends StatefulWidget {
  var urlData;

  IframeScreen(this.urlData, {Key? key}) : super(key: key);

  @override
  State<IframeScreen> createState() => _IframeScreenState();
}

class _IframeScreenState extends State<IframeScreen> {
  final IFrameElement _iFrameElement = IFrameElement();

  @override
  void initState() {
    _iFrameElement.src = widget.urlData;
    _iFrameElement.style.border = 'none';
    _iFrameElement.allowFullscreen = true;
// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      widget.urlData,
      (int viewId) => (_iFrameElement as IFrameElement),
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: HtmlElementView(
          key: UniqueKey(),
          viewType: widget.urlData,
        ),
      ),
    );
  }
}