Start with designing atoms, molecules and finally arrange them together using a mix of open frames and auto-layout (flex) frames. Follow standard Aspect ratio to avoid unnecessary rework on video compression, crop, or stretch. Let me quickly summarise all that I’ve said.įirst of all, you should always set principles for your project architecture. So after this detailed article, hopefully you’ve learned something. 16px) = 2576.Ĭreate it as a component, Publish library and use it as a module Conclusion If you have a fixed real estate for placing the video grid, try to maintain the aspect ratio of the videos by calculating and updating the outer frame value which includes the size of the video container and spacing between.įor e.g, if the size of a video container is 1280x720 and you want to showcase 2 videos in a row, the size of the mainframe would be 1280 + 1280 + Spacing between 2 video containers (eg. Setup main frame considering aspect ratio We need to make a calculation to ensure our video frames are set in according to the standard aspect ratios. Constraints are set to Left-Right and Top-Bottom as it will allow containers to scale in any direction as per the screen size ranging from mobile web to TV. In the above variants, layout grids are used to maintain a fixed spacing between containers without using a flex/ auto-layout to have a more flexible grid. Use Frames, Layout Grids, and Constraints for the flexible or fixed grid.

There might be some cropping issue in both screen share and video playback, if the content is of different size, this can be solved by using a dark grey or black background (as it replicates the cinematic black bar on top-bottom or left-right).Īlso, ask your developer to use ‘contain’ in CSS for screen share or video playback and ‘cover’ for camera video.

Remember to use 16:9 or main video container for Screen share and video playback as most of the available content is in the same ratio and there will be no issue for users to consume the content later on. Variants for displaying 8 videos (it includes video containers in 16:9, 4:3 and 1:1 ratio for a limited real estate) Flipgrid is a video discussion platform to help faculty and students engage in dynamic conversations about course content.

Video grids