onClick on Wrapper passed to React Player not working

Question

I need to show Youtube Video, so I am using React Player. One single click on my video, I have to full screen it. Here is my code:

import ReactPlayer from 'react-player/lazy';
import { SerializedStyles } from '@emotion/core';
import _pick from 'lodash/pick';

import { StyledPlayerContainer, StyledContainer } from './style';

export const PROPS_TO_PICK_FOR_REACT_PLAYER = [
  'controls',
  'loop',
  'muted',
  'height',
  'width',
  'url'
];

export interface Props {
  autoPlay?: boolean;
  controls?: boolean;
  loop?: boolean;
  muted?: boolean;
  height?: string;
  width?: string;
  url: string;
  containerStyles?: SerializedStyles;
  playerContainerStyles?: SerializedStyles;
  onClick: (e: MouseEvent) => void;
}

const Wrapper = ({ children }) => <div>{children}</div>

const Player: React.FC<Props> = (props) => {
  const { onClick, containerStyles, autoPlay, playerContainerStyles } = props;
  return(
    <StyledContainer css={containerStyles}>
       <StyledPlayerContainer css={playerContainerStyles}>
        <ReactPlayer
          {..._pick(props, PROPS_TO_PICK_FOR_REACT_PLAYER)}
          playing={autoPlay}
          onClick={onClick}
          wrapper={Wrapper}
        />
     </StyledPlayerContainer>
    </StyledContainer>
  )
}

Player.defaultProps = {
  controls: true,
  height: '100%',
  width: '100%',
  loop: false,
  muted: false,
  autoPlay: true,
};

export default Player;

According to React-Player docs, I can pass a wrapper, and onClick to react player and onClick will be given to my wrapper. As checked in devtools, the click handler is getting attached to my wrapper but it is not getting called. Tried applying onClick to StyledContainer and StyledPlayerContainer too but it is not getting invoked.

Answer 1

onClick will never work when passed to wrapper of react-player, because, react-player mounts an iframe for youtube. Iframe acts as a separate document, so, events start at iframe and end at iframe, means, capturing starts at iframe and propagation ends at iframe only, so, wrapper's onClick never gets called.