Flutter Web IFrame Embed - by Simon Lightfoot - Humpday Q&A :: 24th January 2024 #Flutter #Dart https://www.youtube.com/watch?v=tVAqEC8R3Q8

humpday_240124.dart

// MIT License
//
// Copyright (c) 2023 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'dart:html' as html;
import 'dart:ui_web' as ui_web;

import 'package:flutter/material.dart';

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

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

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

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

  static const videos = <String>[
    'aLvlqD4QS7Y',
    'giV9AbM2gd8',
    'qgOlg173gcI',
    'k5mSsXdkKxg',
    '7CfGfs259gg',
    'vka33yBz5e4',
    'S0Ylpa44OAQ',
  ];

  @override
  Widget build(BuildContext context) {
    return Material(
      child: ListView.builder(
        itemCount: videos.length,
        itemBuilder: (BuildContext context, int index) {
          final videoId = videos[index];
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
              child: YoutubePlayer(
                videoId: videoId,
              ),
            ),
          );
        },
      ),
    );
  }
}

class YoutubePlayer extends StatefulWidget {
  const YoutubePlayer({
    super.key,
    required this.videoId,
  });

  final String videoId;

  @override
  State<YoutubePlayer> createState() => _YoutubePlayerState();
}

class _YoutubePlayerState extends State<YoutubePlayer>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    ui_web.platformViewRegistry.registerViewFactory(
      'youtube-player',
      (int viewId, {Object? params}) {
        final videoId = params as String;

        final element = html.IFrameElement()
          ..src = 'https://www.youtube.com/embed/$videoId'
          ..style.width = '100%'
          ..style.height = '100%'
          ..style.border = '0'
          ..title = 'YouTube video player'
          ..allow = 'accelerometer; autoplay; clipboard-write; '
              'encrypted-media; gyroscope; picture-in-picture; web-share'
          ..allowFullscreen = true;

        final container = html.DivElement();
        void enablePointerEvents(bool enabled) {
          element.style.pointerEvents = enabled ? 'auto' : 'none';
          container.style.cursor = enabled ? 'auto' : 'pointer';
        }

        enablePointerEvents(false);
        return container
          ..onClick.listen((_) => enablePointerEvents(true))
          ..onMouseLeave.listen((_) => enablePointerEvents(false))
          ..children.add(element);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // AutomaticKeepAliveClientMixin
    return SizedBox(
      width: 560.0,
      height: 315.0,
      child: HtmlElementView(
        viewType: 'youtube-player',
        creationParams: widget.videoId,
      ),
    );
  }
}