-1

The use case is this:

Suppose I got a service thats either responding with an error or with a video url to be played.If video is there, React will render the video , if not, the error. I would like to have a placeholder/error there in all widths/devices with the same height always as the video which is supposed to come in from the service.

In other words I would like to apply rules like: i f i got 16:9 video to come in, make the error placeholder height the same as the video height in that screen size.

How to compute this height responsively per aspect ratio? Does this make any sense?

Thank you

Pan Chrono
  • 420
  • 3
  • 16

1 Answers1

1

You can use the padding-bottom css trick on your container based on aspect ratio. Take the second number and divide by the first and make it a percentage value:

1:1 = 100% 16:9 = 56.25% 4:3 = 75%

https://css-tricks.com/aspect-ratio-boxes/

joknawe
  • 1,510
  • 11
  • 15