7

Is it possible to embed a Youtube video in a Flutter web page? I tried the following code to have a Youtube embedded in my Flutter website, but nothing appears on the page without any error message.

import 'package:flutter_html_view/flutter_html_view.dart';

Container(child: HtmlView(data: """
          <iframe src="https://www.youtube.com/embed/xMzkWfIR9Pk" width="560" height="315"></iframe>
          """)),

Also tried the solution recommended here (WebView in Flutter Web) but that doesn't work either.

import 'dart:ui' as ui

//ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => html.IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');
Dharman
  • 30,962
  • 25
  • 85
  • 135
Jason O.
  • 3,168
  • 6
  • 33
  • 72
  • I'm getting close. https://stackoverflow.com/questions/59890992/embedded-youtube-video-widget-disappears-while-a-web-page-created-by-flutter-fo – Jason O. Jan 24 '20 at 05:55

5 Answers5

3

I used to package called flutter_html But this gave me some scrolling issues.

Html(
    data: '<iframe width="560" height="315" src="https://www.youtube.com/embed/D_mCZlQZg9Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
)
Kaushik Borah
  • 141
  • 1
  • 4
1

You should go like this

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

  String viewID = "your-view-id";

  @override
  Widget build(BuildContext context) {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        viewID,
            (int id) => html.IFrameElement()
          ..width = MediaQuery.of(context).size.width.toString()
          ..height = MediaQuery.of(context).size.height.toString()
          ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
          ..style.border = 'none');

    return SizedBox(
      height: 500,
      child: HtmlElementView(
        viewType: viewID,
      ),
    );
  }
Shahzad Akram
  • 4,586
  • 6
  • 32
  • 65
  • 2
    ui.platformViewRegistry has an error: Try correcting the prefix or importing the library that defines 'platformViewRegistry'.dartundefined_prefixed_name – Gerry Jul 24 '20 at 04:00
  • The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix. – Jérémy May 01 '21 at 16:01
1

You can use the youtube_player_iframe

YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: 'K18cpp_-gP8',
    params: YoutubePlayerParams(
        playlist: ['nPt8bK2gbaU', 'gQDByCdjUXw'], // Defining custom playlist
        startAt: Duration(seconds: 30),
        showControls: true,
        showFullscreenButton: true,
    ),
);

YoutubePlayerIFrame(
    controller: _controller,
    aspectRatio: 16 / 9,
),
CharlyKeleb
  • 587
  • 4
  • 17
0

ext_video_player supports Android, iOS and web for YouTube. You can try running sample code from ext_video_player repo.

I tested with different browsers of different OS. Android, Mac, Windows browsers are working fine with ext_video_player. But it's not playing with iOS browser.

enter image description here

Faslur Rajah
  • 861
  • 2
  • 10
  • 17
  • I tried to use the repo you indicated. Doesn't work on web. It's just stuck on that linear progress widget rather than loading the vid. – Eight Rice Sep 25 '20 at 19:40
0

There are, at least, two solutions:

a) video_player package now works fine in the three main platforms: android, ios and web

b) This article explains a good way to embed video source in a flutter web widget, even when the article is for local files, the final procedure works fine for web sources, like youtube, too: https://vermahitesh.medium.com/play-local-video-on-flutter-web-d757bab0141c

Dharman
  • 30,962
  • 25
  • 85
  • 135
Mario Cristerna
  • 9
  • 2