Published February 2017
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.
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.