Search code examples
htmlcssstyling

How to get all children in 16:9 ratio in tiles list in HTML/CSS

I am trying to get a set of tiled videos to show where 4:3 videos have a black 16:9 background with black bars down the left and right, so they all are in line and there are no differences in video height, as if all videos were in 16:9 format.

This issue at the moment is that with people having different aspect ratios the screen looks messy and I would like to make it uniform. Most people seem to have 16:9 so I want to make that the standard.

I have an example which looks like this, here is the js fiddle of the below example where I have used images, these would be swapped out for videos normally but I think the same principle applies.

https://jsfiddle.net/g0u6ak9p/

enter image description here

I would instead like it to look like this...

enter image description here

I've seen examples of adding a padding-top: 56.25%; but I cannot get this to work properly.

Can anyone advise?

Solution

  • I've figured it out.

    I will need to add CSS for each different number of users, but in doing so I can calculate the max height and width based off the 100vw and 100vh divided by how many rows/columns there are to get the 16:9 ratio I need.

    https://jsfiddle.net/tg2wknfp/5/

    enter image description here

     .video-example{
   width: 100%;
   height; 100%;
   background: #111;
 }
 
.tiles-list-5 > .tile-0 .video-example,
.tiles-list-5 > .tile-1 .video-example,
.tiles-list-5 > .tile-2 .video-example{
  max-height: calc(100vw / 3 * 9 / 16);
  max-width: calc(100vh / 2 * 16 / 9);
}
.tiles-list-5 > .tile-3 .video-example,
.tiles-list-5 > .tile-4 .video-example {
  max-height: calc(100vw / 2 * 9 / 16);
  max-width: calc(100vh / 2 * 16 / 9);
}