cloudflare / cloudflare/stream-react

Responsive video gets cut off when using full screen API on parent element

Abierto
#64 6 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
198
Forks
30
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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.

Screen Shot 2022-04-15 at 14 33 12
Screen Shot 2022-04-15 at 14 33 36

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduce el problema colocando el reproductor en un elemento padre controlado por react-full-screen; después, inspecciona el comportamiento de padding-top del contenedor de iframe durante el modo de pantalla completa. Se considera completado cuando el video responsive conserva la relación de aspecto correcta y no se corta en pantallas grandes al entrar el elemento padre en modo de pantalla completa.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
frontend, web-dev
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.