๐ŸŽฌ Youtube Video Webview for Flutter (Android & iOS)

Flutter

A customizable YouTube video player for Flutter, supporting embedded playback, fullscreen mode, sharing, captions, and seamless redirection to YouTube inside a webview.


โœจ Features

  • ๐Ÿ“ Adjustable video height and width
  • ๐ŸŒ Redirects to the YouTube page inside a webview (via YouTube logo or video title)
  • ๐Ÿ–ฅ๏ธ Fullscreen video playback
  • ๐Ÿ”— Share videos with a custom message
  • ๐Ÿ’ฌ Caption (subtitles) control
  • โš™๏ธ Settings button (YouTube native menu)
  • ๐Ÿงญ Multiple AppBar options for the redirected webview

โ†—๏ธ Check out: Roadmap


๐Ÿš€ Getting Started

Requirements

  • Flutter >= 1.17.0

๐Ÿ“ฆ Installation

Add the package to your pubspec.yaml:

youtube_video_webview: ^1.0.0

Then run:

flutter pub get

๐Ÿงฉ Usage

1๏ธโƒฃ Import the package

import 'package:youtube_video_webview/youtube_video_webview.dart';

2๏ธโƒฃ Add the widget

YoutubeVideoWebview(
  videoId: '<VIDEO-ID>',
  referrerHeader: '<APP-IDENTIFIER-WITH-HTTPS>',
  externalBrowserSettings: YoutubePageWebViewSettings(
    appBar: YoutubeVideoWebviewAppBarShare(
      videoId: '<VIDEO-ID>',
      shareText: 'Check out this video!',
    ),
  ),
)

๐ŸŒ YouTube Page Webview Settings

Customize how the YouTube page opens when redirected:

YoutubePageWebViewSettings(
  dragToDismiss: true, // default
  appBar: YoutubeVideoWebviewAppBarShare(
    videoId: '<VIDEO-ID>',
    shareText: 'Check out this video!',
  ),
)

โžก๏ธ See App Bar Options

๐Ÿงญ App Bar Options

๐Ÿ”น Default App Bar

appBar: YoutubeVideoWebviewAppBarDefault()

๐Ÿ”น Share App Bar

appBar: YoutubeVideoWebviewAppBarShare(
  videoId: '<VIDEO-ID>',
  shareText: 'Check out this video!',
)

๐Ÿ”น Custom App Bar

appBar: YoutubeVideoWebviewAppBarCustom(
  appBar: AppBar(
    title: const Text('Custom App Bar'),
    backgroundColor: Colors.green,
  ),
)

๐Ÿ”น No App Bar (Drag to Dismiss)

dragToDismiss: true

โ„น๏ธ If no AppBar is provided, drag-to-dismiss is enabled automatically.

๐Ÿงช Additional Information

This package is under active development, but it is already stable and ready for production use.

๐Ÿšง More features and improvements coming soon!

๐Ÿค Contributing

Found a bug or have an idea?

๐Ÿ‘‰ Suggestions & Issues

๐Ÿ‘ค Author

๐Ÿ”— LinkedIn

๐Ÿ’ป GitHub