Customizing Media Elements - HTML5 Media - page 48

}
video:hover, video:focus
{
/* add glow */
-webkit-box-shadow: 0 0 20px #f88;
box-shadow: 0 0 20px #f88;
/* rotate and move video */
-moz-transform: scale(1.0) translate(0) rotate(0deg);
-webkit-transform: scale(1.0) translate(0) rotate(0deg);
-o-transform: scale(1.0) translate(0) rotate(0deg);
-ms-transform: scale(1.0) translate(0) rotate(0deg);
transform: scale(1.0) translate(0) rotate(0deg);
}
</style>
I highlighted the changes in the example in bold to make them easier to spot. The transform
works with all of the target browsers, including IE9. Be aware, though, that Safari 5 on Win-
dows seems to be preoccupied with loading the video and may not immediately respond to the
mouse hover or keyboard focus.
Figure 15 shows the video element when it receives the keyboard focus. It's a good thing the
element accepts both the keyboard and mouse focus in order to return to normalcy, or you'd
have to keep your mouse over the video just to watch it without having to turn your head to
the side.