CODEWITHSUNDEEP
flutteryoutubeflutter-web
Jason O.
Jason O.

Reputation: 3290

Embedding a Youtube video in Flutter Web

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');

Upvotes: 7

Views: 14329

Answers (5)

CharlyKeleb
CharlyKeleb

Reputation: 754

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,
),

Upvotes: 1

Mario Cristerna
Mario Cristerna

Reputation: 9

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

Upvotes: 0

Kaushik KB
Kaushik KB

Reputation: 151

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>',
)

Upvotes: 3

Faslur Rajah
Faslur Rajah

Reputation: 1005

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

Upvotes: 0

Shahzad Akram
Shahzad Akram

Reputation: 5254

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,
      ),
    );
  }

Upvotes: 1

Related Questions