youtube_player_iframe 3.0.3 icon indicating copy to clipboard operation
youtube_player_iframe: ^3.0.3 copied to clipboard

Flutter port of the official YouTube iFrame player API. Supports web & mobile platforms.

Youtube Player IFrame #

pub package licence Download Stars Top Language effective dart Web DEMO

Flutter plugin for playing or streaming YouTube videos inline using the official iFrame Player API. The package exposes almost all the API provided by iFrame Player API. So, it's 100% customizable.

YOUTUBE PLAYER IFRAME

Click here for WEB DEMO

Salient Features #

  • Inline Playback
  • Supports captions
  • No need for API Key
  • Supports custom controls
  • Retrieves video meta data
  • Supports Live Stream videos
  • Supports changing playback rate
  • Exposes builders for building custom controls
  • Playlist Support (Both custom and Youtube's playlist)
  • Supports Fullscreen Gestures(Swipe up/down to enter/exit fullscreen mode)

This package uses webview_flutter under-the-hood.

Migrating to v3 #

v3 introduces YoutubePlayerScaffold to handle the fullscreen mode consistently in all platform. So, upgrading to v3 will break the fullscreen player unless the following changes are made.



// Before
final _controller = YoutubePlayerController(
  initialVideoId: 'K18cpp_-gP8',
  params: YoutubePlayerParams(
    startAt: Duration(seconds: 30),
    autoPlay: true,
  ),
);

Scaffold(
  appbar: AppBar(
    title: Text('YouTube Player'),
  ),
  body: YoutubePlayerIFrame(
    controller: _controller,
    aspectRatio: 16 / 9,
  ),
);

// After
bool autoPlay;

final _controller = YoutubePlayerController()..onInit = (){
  if(autoPlay) {
    _controller.loadVideoById(videoId: 'K18cpp_-gP8', startSeconds: 30);
  } else {
    _controller.cueVideoById(videoId: 'K18cpp_-gP8', startSeconds: 30);
  }
};

YoutubePlayerScaffold(
  controller: _controller,
  aspectRatio: 16 / 9,
  builder: (context, player) {
    return Scaffold(
      appbar: AppBar(
        title: Text('YouTube Player'),
      ),
      body: player,
    ),
  },
),

Note: The YoutubePlayerScaffold should be top-most widget in the page.

Setup #

See webview_flutter's doc for the requirements.

Using the player #

final _controller = YoutubePlayerController(
  params: YoutubePlayerParams(
    mute: false,
    showControls: true,
    showFullscreenButton: true,
  ),
);

The player can be used in two ways:

Using YoutubePlayerScaffold

This widget can be used when fullscreen support for the player is required.

YoutubePlayerScaffold(
  controller: _controller,
  aspectRatio: 16 / 9,
  builder: (context, player) {
    return Column(
      children: [
        player,
        Text('Youtube Player'),
      ],
    ),
  },
),

Using YoutubePlayerIFrame

This widget can be used when fullscreen support is not required.

YoutubePlayerControllerProvider(
  controller: _controller,
  child: YoutubePlayerIFrame(
    aspectRatio: 16 / 9,
  ),
);

// Access the controller as: `YoutubePlayerControllerProvider.of(context)` or `controller.ytController`.

Want to customize the player? #

The package provides YoutubeValueBuilder, which can be used to create any custom controls.

For example, let's create a custom play pause button.

YoutubeValueBuilder(
   controller: _controller, // This can be omitted, if using `YoutubePlayerControllerProvider`
   builder: (context, value) {
      return IconButton(
         icon: Icon( 
                  value.playerState == PlayerState.playing
                    ? Icons.pause
                    : Icons.play_arrow,
         ),
         onPressed: value.isReady
            ? () {
                  value.playerState == PlayerState.playing
                    ? context.ytController.pause()
                    : context.ytController.play();
                 }
            : null,
      );
   },
);

Limitation #

For Android: Since the plugin is based on platform views. This plugin requires Android API level 19 or greater.

License #

Copyright 2022 Sarbagya Dhaubanjar. All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
304
likes
130
pub points
98%
popularity

Publisher

verified publisher iconsarbagyastha.com.np

Flutter port of the official YouTube iFrame player API. Supports web & mobile platforms.

Homepage
Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-2-Clause (LICENSE)

Dependencies

flutter, meta, url_launcher, webview_flutter, youtube_player_iframe_web

More

Packages that depend on youtube_player_iframe