React - how to capture full screen video request in html5?

Question

I have a HTML5 video element in my React component. I would like to implement a custom function for clicking on full screen button. So that when on clicking the icon for full screen, instead of going full screen, I would change the css class mediaWrapper on the wrapping video element.

const Media = ({classes, mediaModel, zoomInClicked, zoomOutClicked, showEnlargedImage}) => {
      return (<div className={classes.mediaWrapper}>
        <video
          data-testid="video-player" width="100%"
          src={mediaModel.url}
          onContextMenu={disableEvent}
          controlsList="nodownload"
          controls
          disablePictureInPicture
          />
      </div>
)};

I see here, there is no native event for capturing something like that. I was thinking of implementing maybe onfullscreenchange, but that would trigger when the video would already be full screen from what I could understand. How can I override the fullscreen implementation of the video element in React?

Answer 1

You cannot override it. You can create custom player that shows fullscreen button and implement custom logic, but you cannot detect when the fullscreen button in native video element is clicked.