[BUG] If any object overlays the video in the web, instead of the object (dialog, drawer, etc) receiving the click, it goes to the player

[phackwer]

Describe the bug If any object overlays the video in the web, instead of the object (dialog, drawer, etc) receiving the click, it goes to the player

To Reproduce Create a page (web) with a player and a button that calls dialog or drawer (or any other widget) to overlay the player. Try to trigger an action on that widget and you see that the player will start or stop instead of calling the action from the overlaying widget.

Expected behavior We expected that overlaying objects could be clickable.

Technical Details:

• Device: Web
• OS: Chrome/Firefox
• Version latest on both

[phackwer]

Important to say: does NOT happen in iOS or Android native apps, but does happens in browsers.

[samirmanektech]

@phackwer Did you find any solution? I am facing the same issue.

[ComputelessComputer]

same here I am guessing this is because of the Javascript event is dominant over the flutter tap events

[phackwer]

We made all videos to play full screen/window. This at least workaround the problem

On Tue, 20 Apr 2021, 17:02 John Jeong, @.***> wrote:

same here

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/sarbagyastha/youtube_player_flutter/issues/338#issuecomment-823401797, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFFM2VFNVG65X6EAGCYZPTTJWQPXANCNFSM4QHMGPUQ .

[o7planning]

SOLVERED!! I have fixed this issue with following code, you need to call _fixYoutubeOnWeb1() before you open Dialog, and call _fixYoutubeOnWeb2() after you close dialog:

import 'dart:js' as js;

 void _fixYoutubeOnWeb1() {
    try {
      String jsCode = '''
              var iframes = document.getElementsByTagName("iframe"); 
              for(var i = 0; i < iframes.length; i++) { 
                 iframes[i].style.pointerEvents = "none";
              } 
          ''';
      js.context.callMethod("eval", [jsCode]);
    } catch (e) {
      print('Error _fixYoutubeOnWeb: $e');
    }
  }

 void _fixYoutubeOnWeb2() {
    try {
      String jsCode = '''
              var iframes = document.getElementsByTagName("iframe"); 
              for(var i = 0; i < iframes.length; i++) { 
                 iframes[i].style.pointerEvents = "auto";
              } 
          ''';
      js.context.callMethod("eval", [jsCode]);
    } catch (e) {
      print('Error _fixYoutubeOnWeb: $e');
    }
  }

[tannercrook]

Just commenting here that I am having the same issue. Would love for a built-in fix for this.