[BUG] Context-menu(by right mouse click) is displayed when overlaying widget(by stack) is touched on iOS

[nicejhkim]

Describe the bug When the player widget is covered by other widget with Stack, touch event is not blocked by covering widget and unintended context menu(Account/ Loop/ Copy video URL/...) is popped up only in iOS

To Reproduce

Stack(
  fit: StackFit.expand,
  children: [
    player,
    Expanded(
        child: Container(
            color: Colors.yellow.withOpacity(0.3),
            child: Center(
              child: TextButton(
                  onPressed: () => print('button pressed'),
                  child: const Text('Overlay Button',
                      style: TextStyle(fontSize: 20.0))),
            )))
  ],
)

Container with TextButton blocks touch event and Player widget does not receive touch event correctly on Android. But when tested on iOS, player receives a touch event and unintended menu pop up is displayed.

On Android, touch event is blocked by the Container

On iOS, touch event is delivered to the player and unintended menu popup is displayed

When I click the overlay button, Android: nothing happens on player iOS: player play/paused and menu popped.

Technical Details:

• OS: iOS 15.5
• Version [e.g. 22]
• youtube_player_iframe: 3.0.4

[RonakPustack]

Is there an update on this issue? Maybe a resource that could help, scraping through the youtube API documentation made me realize that this context menu is not intended to be disabled. I have tried using webviewx plugin to utilize their WebViewAware widget but even that has not helped me yet.

[RonakPustack]

@nicejhkim Try updating the plugin to the latest version, this issue can be fixed by adding pointer-events to none for the body tag in CSS. Check out the raw_youtube_player.dart file in this project and search for pointer-events property.

[tascienes]

@nicejhkim Did you find a solution? I have the same problem on ios.

[nicejhkim]

I couldn't find any solution for this issue. When I wrap the player with IgnorePointer() events are not reached to the player, but context menu is still popped up only on iOS. I have tested on iOS 13, iOS 16, youtube_player_iframe 3.1.0 (with webview_flutter) and 2.3.0(with inappwebview) and get the same result.

I was going to make custom controls on video screen which replace the original controls but I gave up on iOS. Please let me know if anyone have a clue for this issue. : )

[Ronak99]

Going over to raw_youtube_player.dart and setting pointer-events to none worked for me.

 body {
                margin: 0;
                padding: 0;
                background-color: #000000;
                overflow: hidden;
                position: fixed;
                height: 100%;
                width: 100%; 
                pointer-events: none; 
            }

[nicejhkim]

@Ronak99 That works for me! Thanks!

[qbait]

I've tried the solution with body { pointer-events: none; } and it doesn't show the context menu anymore. However, the problem now is that the big play youtube button isn't clickable anymore too

I've tried to enable it by adding ytp-large-play-button { pointer-events: auto; }

but it doesn't work, any idea how to solve that issue?

[nicejhkim]

@qbait I disabled showControls option and made custom controls over the video. Every control but Settings and Captions were possible.