Responsive web design is quickly becoming the norm, and for good reason. At the same time HTML5 video is quickly becoming a reliable alternative to embedded flash video. Unfortunately, at times it can be tricky to make video elements play nice with responsive design. Many people have taken to JavaScript based solutions such as FitVids.js. This puzzles me because it is not very difficult to make videos behave well in responsive design using only CSS. The technique I am going to show you works well with the HTML <video> element (including Video.js), as well as embedded flash videos from sites such as YouTube and Vimeo. It works in all modern browsers as well as Internet Explorer 7+.

Read more…