1

I am trying to implement a responsive video "collage" that display videos of various aspect ratios in a flexible grid.

In each row, the videos have the same height, but they fill the horizontal width of a div. Since the width and the aspect ratio of each video are known, I think it's straightforward to calculate the height. Not sure how to implement it with CSS + Javascript. Anyone can help? Thank you very much.

Tao Ni
  • 13
  • 3
  • http://stackoverflow.com/questions/1186414/whats-the-algorithm-to-calculate-aspect-ratio-i-need-an-output-like-43-169 – adeneo Jan 02 '15 at 04:45

2 Answers2

0

Not 100% sure about the question but try this in your css.

video {
    width: 100%;
    height: auto;
}
Shak Daniel
  • 217
  • 4
  • 11
  • Hi Shak - I intended to add a mockup image to explain but since I am new to stackoverflow I cannot. I put it here in the dropbox: https://www.dropbox.com/s/a8m7941w4i3jtks/Screen%20Shot%202015-01-02%20at%2012.00.55%20PM.png?dl=0. this is what I try to achieve. Let's say I have 6 videos of various size and aspect ratio. I want to display them in a grid like that. The width in each row is maintained and the videos are automatically scaled to fit in the row, with the aspect ratio respected. – Tao Ni Jan 02 '15 at 17:05
0

Just use fitvids.js to make your videos responsive. You can even add your own formats, but it comes with the basics like youtube, vimeo, etc. I even added slideshare presentations to it and it worked:

http://fitvidsjs.com/

Just css doesn't work because it doesn't first figure out or know the original size of the video.

Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • I am new to stackoverflow so I cannot attach image :) I put a mock here, let's say we have 6 videos with various aspect ratio. Is this something achievable with fitvidsjs? Thanks! https://www.dropbox.com/s/a8m7941w4i3jtks/Screen%20Shot%202015-01-02%20at%2012.00.55%20PM.png?dl=0 – Tao Ni Jan 02 '15 at 17:02
  • If the video's original aspect ratios are exactly the sizes you want to start with, it might be possible. But if they are all the same I think it won't work. See the pen I created and have a play, it's running fitvids and has three sample videos in a layout: http://goo.gl/3KpGoJ – Nathaniel Flick Jan 02 '15 at 19:58
  • Probably the easiest way to do this would be to use a screenshot of the start frame of each vid and then on click have the video start in a pop up. Then you can control more how the layout looks. Just one idea though. – Nathaniel Flick Jan 02 '15 at 20:07