The state of responsive video on the web

Since the introduction of HTML5, the <video> element has simplified how we include videos on the web, with browsers natively supporting video without the need for Flash.

Closely resembling the <picture> element, the <video> element allows for source tags to be added, which allows the use of multiple media files to be specified. This means that if a browser does not support webm files, it can then load an mp4 instead. Thus ensuring cross browser support for videos.

Also along with the <picture> element, <video> sources initially allowed the use of media attributes (to easily specify media queries in html i.e. media="(min-width: 768px)). Which could serve a specific source at a particular screen. However Google Chrome and other browsers stopped supporting this feature a while back and haven't offered an alternative. In my opinion they did this for valid reasons because videos are a lot trickier than images to load responsively.

One caveat is how the media attribute should handle media queries. Should it behave like the <picture> sources whereby it'll continually update when layout changes occur, or just load the video only once based on it's media query. Both scenarios create issues, for example if it was to continually update, surely this would be taxing in terms of data usage. A major obstacle here too is that "loading a new [video] resource is "destructive" (resets currentTime etc)". So a user could in theory rotate their phone, trigger a new source to be loaded and then the video would restart, not ideal right? Then if a source were to load only once, layout changes would be lacking an updated source, this would be particularly crucial when using full screen for example.

There are JavaScript solutions to this problem out there, I've even built my own responsive video module that's quite neat using data attributes to load mobile, tablet and desktop video files based on predefined breakpoints. Although this is possible it would be great to see something native within HTML. In fact Scott Jehl has started putting together a proposal for re-introducing the media attribute on `<video>` sources. This is exciting as we may see the issues I've mentioned above get resolved and we can then serve videos more efficiently on the web.