Responsive media (images and videos) using only CSS

There’s no reason to explain everything from scratch, there are plenty of posts on this topic, but if you are building a responsive layout, don’t forget to apply these media rules to your CSS file.

See the Pen Responsive media (images and videos) using only CSS by John Tsevdos (@tsevdos) on CodePen

With the above styling rules we ensure that all of our media files (images and videos) are ready for responsive layouts. The first two rules are very easy to understand and probably the safest and simplest way to publish media online (since we are talking about pure HTML5 elements). The final two rules are for embedded media (objects, embeds and iframes), that we simply wrap into a container/wrapper element (with a class of video). I first read of this technique on a post entitled “CSS: Elastic Videos” and personally I believe that it’s the best solution for responsive video embeds. I’m usually against Javascript solutions/alternatives, like for example FitVids.JS, since it’s a pure presentational (CSS) issue and not a functional (Javascript) one.

So if you’re building a responsive layout, try treating your media with the pure CSS approach. It’s the fastest, simplest and cleanest way to achieve responsive media

HTML5 video and mobile browsers

The brand new HTML5 video element is surely very impressive. You’ve encoded your videos in multiple formats (well, at least .mp4 and .webm to support all browsers), you might’ve also provided Flash fall-backs and you are very proud of your good work. But what happens with the mobile users?

The majority of mobile browsers will recognize/play the HTML5 video, but the problem is not the browser support, nor the file format. The problem is the bandwidth. Your brand new HD video might take ages to download through 3G! Wouldn’t it be great if you could provide a mobile-friendly version of your video source (with smaller resolution, less fps, and much smaller file size)?

Well, you can very easily do that, with the use of some very basic media queries. The below code will serve two mobile only video sources (again an .mp4 and a .webm file) in order to support as many mobile devices as we can. Of course keep the specific video files small and optimized (otherwise there is no point in implementing this)!

See the Pen HTML5 video and mobile browsers by John Tsevdos (@tsevdos) on CodePen

Don’t waste your mobile visitors bandwidth and time. Provide smaller, mobile-friendly alternatives!