O'Reilly logo

HTML5 iPhone Web Application Development by Alvin Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing HTML5 video controls

We probably want more input into the video controls, from styling to video functionality, such as adding a stop button. In order to do this we need to modify our markup a bit. We should do the following with the video:

<div class="video-container">
    <video src="../assets/testvid.mp4" controls preload>
        <p>Video is not supported in your browser.</p>
    </video>
</div>

All we did here was add a class containing div around the video element and added a class of video-container to it. Now we want to add some responsive styling to the video element, so let's open up video.css and add the following styles:

video {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.video-container {
    width: 100%;
}

The first selector ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required