-
Book Overview & Buying
-
Table Of Contents
Responsive Web Design with HTML5 and CSS3 Essentials
By :
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:
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...