Making video responsive

Flexible videos are somewhat more complex than images. The HTML5 <video> maintains its aspect ratio just like images and therefore we can apply the same CSS principle to make it responsive:

   video {
      max-width: 100%;
      height: auto !important;
   }

Until relatively recently, there have been issues with HTML5 video—this is mainly due to split support for the codecs required to run HTML video. The CSS required to make a HTML5 video is very straightforward, but using it directly presents a few challenges:

  • Hosting video is bandwidth intensive and expensive
  • Streaming requires complex hardware support in addition to video
  • It is not easy to maintain a consistent look and feel across different formats and platforms

For many, a better alternative ...

Get Responsive Web Design with HTML5 and CSS3 Essentials now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial