Youtube_player_flutter: [BUG] YoutubePlayerIFrame scrolling issue (flutter Web)

[ozz-rjq]

Describe the bug
If you put YoutubePlayerIFrame inside the listview, hover over the widget and try to scroll - it doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Create a flutter app
2. Add youtube_player_iframe package
3. Create a listview, add some test elements and YoutubePlayerIFrame widget.
4. Scrolling does not work when a mouse is over the YoutubePlayerIFrame widget. Looks like it intercepts all the gestures.

Expected behavior
ListView should be scrollable like in the native apps.

Technical Details:

• Device: [Flutter Web]

[Jairolaya12x]

Try adding this code to prevent that the webview into the component try to handle the scroll events

YoutubePlayerIFrame(
      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},
      controller: _controller,
),

In mobile works fine 🔥, regards!

[FerBueroTrebino]

      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},

This solution doesn't work on web.

I have the same issue.

[quangvtvp]

I have the same issue, is there anyone who can have the solution for this?

[FerBueroTrebino]

I have the same issue, is there anyone who can have the solution for this?

@quangvtvp my solution was to change to the package youtube_plyr_iframe.

[deepakrana0011]

I have the same issue, is there anyone who can have the solution for this?

@quangvtvp my solution was to change to the package youtube_plyr_iframe.

@FerBueroTrebino its also not working on web, have you used any specific configuration

[FerBueroTrebino]

@deepakrana0011 Did you try to add the Scrollbar widget?

Here is the code of my implementation:

class YoutubePlayer extends StatefulWidget {
  final String videoID;
  YoutubePlayer(this.videoID);
  @override
  _YoutubePlayerState createState() => _YoutubePlayerState();
}

class _YoutubePlayerState extends State<YoutubePlayer> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {
          _showDialog(
            context,
            widget.videoID,
          );
        },
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Stack(
              children: <Widget>[
                LayoutBuilder(
                  builder: (context, constraints) {
                    if (kIsWeb && constraints.maxWidth > 800) {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width / 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    } else {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width * 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max,
                                webp: false),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    }
                  },
                ),
              ],
            ),
            Icon(
              Icons.play_circle_filled,
              color: Colors.white,
              size: 55.0,
            ),
          ],
        ),
      ),
    );
  }

[deepakrana0011]

@deepakrana0011 Did you try to add the Scrollbar widget?

Here is the code of my implementation:

class YoutubePlayer extends StatefulWidget {
  final String videoID;
  YoutubePlayer(this.videoID);
  @override
  _YoutubePlayerState createState() => _YoutubePlayerState();
}

class _YoutubePlayerState extends State<YoutubePlayer> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {
          _showDialog(
            context,
            widget.videoID,
          );
        },
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Stack(
              children: <Widget>[
                LayoutBuilder(
                  builder: (context, constraints) {
                    if (kIsWeb && constraints.maxWidth > 800) {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width / 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    } else {
                      return Container(
                        color: Colors.transparent,
                        padding: EdgeInsets.all(5),
                        width: MediaQuery.of(context).size.width * 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new Image.network(
                            YoutubePlayerController.getThumbnail(
                                videoId: widget.videoID,
                                // todo: get thumbnail quality from list
                                quality: ThumbnailQuality.max,
                                webp: false),
                            fit: BoxFit.fill,
                          ),
                        ),
                      );
                    }
                  },
                ),
              ],
            ),
            Icon(
              Icons.play_circle_filled,
              color: Colors.white,
              size: 55.0,
            ),
          ],
        ),
      ),
    );
  }

@FerBueroTrebino as per code you are showing only thumbnail of the youtube video where you are playing the youtube video

[Katekko]

Same here, I really don't know what to do....
Iv made a player from scratch to VIMEO and works fine, using video player from flutter itself, but all the players from youtube all have to much issues that nobody can answer how to fix

[yeasin50]

anyUpdate on scroll issue ? or aything else works for web?
i tried something like
this : StackOverflow