O'Reilly logo

Responsive Web Design with HTML5 and CSS3 Essentials by Asoj Talesra, Gaurav Gupta, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required