HTML and CSS Reference
In-Depth Information
In addition, we're going to add a little fun effect for when the video plays. We'll be “turning
down the lights in the house” by setting the background color of the page to a darker color
while the video is playing, and “turning up the lights in the house” by setting the background
back to white when the video is stopped or finished playing. For this effect, we'll need to add
a CSS transition for the
body
element that is specific to only the background color.
We'll keep the button style and button control area style, but remove the feedback styling, as it
is no longer needed.
Example 19
shows the complete stylesheet setting for the newest version
of the control.
Example19.Stylesheet settings for custom controls and progress bar
video
{
/* basic border */
border: 1px solid #ccc;
padding: 20px;
margin: 10px;
border-radius: 20px;
}
/* gradients and color backgrounds */
video, #start, #stop, #pause
{
/* add regular background */
background-color: #ffcccc;
/* add gradient background */
background-image: linear-gradient(top, #fff, #fcc);
background-image: -moz-linear-gradient(top, #fff, #fcc);
background-image: -webkit-linear-gradient(top, #fff, #fcc);
background-image: -o-linear-gradient(top, #fff, #fcc);
background-image: -ms-linear-gradient(top, #fff, #fcc);
}
/* shadows */
video, #start, #stop, #pause
{ -webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}
#controls
{
margin: 5px 30px;
}
#start, #stop, #pause
