Fluid Video Aspect Ratio with CSS and Element Queries

Published February 2017

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

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.

Related Videos


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

Meet your instructor
Tommy Hodgins

Toronto-based frontend developer and designer specializing in responsive web design. I co-founded the EQCSS project, and actively participate in the discussion surrounding element queries, container queries, and scoped CSS. In my spare time I enjoy illustrating new ideas and techniques on Codepen, teaching HTML/CSS through local talks and workshops, and playing code golf with friends near and far.