Fluid Video Aspect Ratio with CSS and Element Queries

Extend your CSS with powerful element queries using the EQCSS.js extension

About the screencast

Keeping your media fluid in a responsive setting can be challenging. Especially when working with video with a specific aspect ratio.

In this screencast Tommy Hodgins walks you through two methods for maintaining video aspect ratio in a responsive setting: first with pure CSS and then with a CSS extension called EQCSS.js. EQCSS is a library that enables element queries in CSS which allow you to respond to properties of elements rather than just the viewport as we do with media queries. It’s a powerful tool and a hot topic.

For more information about element queries, check out this post on SitePoint: Beyond Media Queries - It’s Time to Get Elemental.

  • Last Updated May 2017


Have your say! or become a member now to take part in the discussion