Note: I’m happy to make a pull request to fix this, I just wanted to log it first to ensure there’s interest.

---

React’s [synthetic media events](https://reactjs.org/docs/events.html#media-events) contain several [existing media events](https://html.spec.whatwg.org/multipage/media.html#mediaevents), for instance `onLoadedMetadata` and `onVolumeChange`. But there is no `onResize` handler.

[`resize` is a standard media event](https://html.spec.whatwg.org/multipage/media.html#event-media-resize) that triggers when one or both of the `videoWidth` and `videoHeight` attributes have just been updated. It’s useful for responding to resolution changes in video players.

React version: 17.0.2 (latest release as of initial issue report)

## Steps To Reproduce

1. Create a `<video>` element with an `onResize` prop.
2. Check the console for the following warning:

```
 Warning: Unknown event handler property `onResize`. It will be ignored.
```

Link to code example: https://codesandbox.io/s/musing-snowflake-zb0qh?file=/src/App.js

## The current behavior

`onResize` handlers are ignored on `<video>` elements.

## The expected behavior

`onResize` handlers are valid on `<video>` elements.
childContainer,
      );
      const parentNode = ReactDOM.render(
        <div onMouseOut={onMouseOut}>div</div>,
        parentContainer,
      );
      parentNode.appendChild(childContainer);
      document.body.appendChild(parentContainer);
      try {
        const nativeEvent = document.createEvent('Event');
        nativeEvent.initEvent('mouseout', true, true);
        childNode.dispatchEvent(nativeEvent);
        expect(mouseOut).toBeCalled();
        expect(mouseOut).toHaveBeenCalledTimes(2);
        expect(mouseOut.mock.calls[0][0]).toEqual(childNode);
        expect(mouseOut.mock.calls[1][0]).toEqual(parentNode);
      } finally {
        document.body.removeChild(parentContainer);
      }
    });
    it('should propagate events two levels down', () => {
      const mouseOut = jest.fn();
      const onMouseOut = event => mouseOut(event.currentTarget);
      const childContainer = document.createElement('div');
      const parentContainer = document.createElement('div');
      const grandParentContainer = document.createElement('div');
      const childNode = ReactDOM.render(
        <div onMouseOut={onMouseOut}>Child</div>,
        childContainer,
      );