Draggable iframe outside iframe

Hello i have a problem. I have an iframe inside it has its own life (its own interface).

Since "bubbling events" stops at the top level inside the iframe, holding on to the iframe I can't drag it.

what can you advise me ?


 <Draggable bounds="body">
        <div className={styles.container}>
          <div className={styles.videoCallContainer} ref={rootRef}>
            {isIFrameLoaded && (
              <iframe src...>
              // etc
            )}
          </div>
        </div>
      </Draggable>

If at least one element is on top of an iframe then I can grab and drag it, but then it overlaps the interface inside the iframe itself.

I tried adding

on top of the iframe and giving this div the styles

  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  border: 1px dashed tomato;

But it doesn't help. The behavior is the same as without the div

dependencies: "react-draggable": "4.4.3", "react": "16.10.2", "react-dom": "16.10.2"

Thanks

react-grid-layout / react-draggable

Draggable iframe outside iframe #542