cloudflare / cloudflare/stream-react
Responsive video gets cut off when using full screen API on parent element
- Dominant language
- TypeScript
- Stars
- 198
- Forks
- 30
- PR merge metrics
- No merged PRs in 30d
Description
I have a situation where I have the player wrapped in a parent div that the user can toggle full screen on, as in, not by using the fullscreen button in the player itself. This is so that other elements can be included in fullscreen mode. The lib I'm using for this is [https://www.npmjs.com/package/react-full-screen](https://www.npmjs.com/package/react-full-screen).
The problem is that the aspect ratio doesn't get updated correctly which results in the video getting cut off on large screens.
It looks to be because of the `padding-top` on the iframe wrapper div.

Contributor guide
Research direction
Reproduce the issue by placing the player in a parent element controlled by react-full-screen, then inspect the iframe wrapper's padding-top behavior during fullscreen. Done means the responsive video preserves the correct aspect ratio and is not cut off on large screens when the parent element enters fullscreen.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100