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 is to host the video through a third-party service such as YouTube. There is a caveat that they would be in control of your video content; if this isn't an issue, we can let them worry about bandwidth issues...