I’m trying to create my own video controls, but am having trouble with the CSS.
I have something like this:
<div class="video">
<video src="video.webm"/>
<nav class="controls">
</nav>
</div>
div.video {
width: 640px;
height: 360px;
background: black;
}
video {
width: 100%;
margin-top: 42px;
margin-bottom: 42px;
}
div.video > nav.controls {
width: 100%;
height: 32px;
color: white;
background: gray;
}
The size of the div.video and margin size of the video is actually set via JavaScript. It’s width is arbitrary and it’s aspect ratio is always 16:9. The width of the video is set to 100% as to take up the full width. If the aspect ratio of the video is something other than 16:9 you should get bars on the bottom or side.
My problem is figuring out how to manage the controls. I want to have them operate similar to YouTube’s. I need to find a way to position them at the bottom without them disrupting the rest of the video.