How to Work out the Correct Padding Top for your Video

The 56.25% is the sweet spot that creates the area for the video based on the 16*9 aspect ratio

To work out a video aspect ratio padding %, divide the height by the width, for example if we had a non standard aspect ratio for a video 512px wide by 380px high, 512/380=1.34736842105263, so 134.73% would bet the sweet spot for that size.

The 2nd CSS declaration .vjs-fullscreen removes the padding so the video is not pushed down in fullscreen mode, the .vjs-fullscreen class is added when the fullscreen button is pressed.

Thats it, the VideoJS should scale as the viewport changes. To see the set up with minimal code in the source here is a barebones example. This set up has been tested and verified in IE 9 & 10, latest Chrome, Firefox and Safari and iOS devices.

Here is an example of VideoJS in a Bootstrap framework.

One thought on “How to Work out the Correct Padding Top for your Video

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.