Auto Resize Background Video While Maintaining 16:9 Ratio & Margins

Design help General
21

Made this account to say THANK YOU. This was SO difficult to solve - had to follow your example exactly to reformat the background video to resize for different screen sizes. Not sure why this has to be so difficult to achieve, but there we go!

1 Like
22

Here is a summary of how I solve this without custom code…

  1. Get original file size dimensions of your background video. Assuming width is wider than height, divide the height (i.e. 360px) by the width (640px). This equals 0.5625. Note for for step 3.
  2. Background video should have a position of absolute 0% all the way around; width 100% and height 100%.
  3. Now nest your background video a parent class; call it something like “bg-video-container-padding” — make it position relative, and give it a top padding of 56.25% (what you calculated in step 1 above).
  4. May also need to give the parent layer a z-index value, but possibly not.
1 Like
23

Now when we can set the ratio property the solution is even easier (finally!). Just give your background video div specific width or height, set the other to AUTO (for example, width 100%, height AUTO) and change Ratio from AUTO to the desired one. Voila!

24

Thank you so much for this, was just looking for a solution for this exact issue. Super helpful @webdev!

1 Like