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 will apply to all the video elements on the page, and we are telling each element to have a width of 100 percent relative to its container, but to only have a max width of...