Aspect Ratio Markup for Video Content

I recently had to add a promotional video to a website using an IFrame and found it really quite fiddly to try and enforce a 16:9 aspect ratio – not only when first rendering the page but also upon re-sizing the browser. This blog post nails it though using css and div containers. Essentially you use padding to define the height of the container as a fixed percentage of the width ie:

• padding-bottom: 56.25%: The 16:9 aspect ratio corresponds to a height that is 56.25% of the width.

Then you apply another css class to to the IFrame which overrides the padding setting with position: absolute allowing the video to be placed over the padding area:

• position: absolute: Free the video from the height boundary of its parent and allow it to be positioned over the padding area.