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…

Tagged as , , . Filed as Text.

Last updated June 7, 2013

So, you want to use HTML5 video? Unfortunately, we are still at a point where different browsers treat video in a different manner, making it a challenge to serve the correct format to the correct browser. One good and popular solution is to host your video using YouTube or Vimeo. Cross-browser support, including mobile devices, is pretty good with these. But there are some situations where this is not a good option. For example, I recently re-designed a website for company that sells products to schools. They discovered that YouTube and Vimeo were blocked by most school filters, so their target audience was unable to see their videos. Enter Video.js, a reliable and fully-cross browser video player for self-hosting videos.

Read more…

Tagged as , . Filed as Text.
Facebook Twitter Nose Creek Web Design RSS