HTML and CSS Reference
In-Depth Information
RESPONSIVE VIDEO
For video, the solution to making it responsive is a bit different. HTML5
<video>
has
a rather nifty responsive mechanism included—a
media
attribute on the
<source>
element in which you can insert a media query test. If the test is passed, that
video source is the one loaded into the
<video>
element, unless of course another
<source>
element later on in the source order overrides it.
In media-blitz-5-responsive-video.html, you can see this in action:
<video controls>
e ” ”
p
media=”all and (max-width: 480px)”>
e ” ”
p
media=”all and (max-width: 480px)”>
e ” ”
p
media=”all and (min-width: 481px)”>
e ” ”
p
media=”all and (min-width: 481px)”>
.
</video>
When the screen width is 480px or less, the 320 video is loaded; when the
screen width is more than 480px, the 720 video is loaded.
NOTE:
I cheated slightly in media-blitz5.css. I set the <video> element to
width: 100%, not, max-width: 100%, so that the video will always span the
full width of the screen, even when the 320 video is displayed across the
full-screen width at 321-480px. This is not a great idea, especially when
the width gets much bigger, because the video will start to look very
grainy. You need to be especially mindful of this on very high-resolution
devices like the iPhone 4.
