xxxxxxxxxx
<div id="vid-container">
<video src="video.mp4"></video>
<div id="controls"> control stuff goes here </div>
</div>
<style>
#vid-container {
position: relative;
width: 400px; // Make this the width of the video
}
// Place the controls to be at the bottom of the video, and on top, and invisible
#controls {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
opacity: 0;
}
// Make the controls show when the video container is hovered
#vid-container:hover #controls {
opacity: 0.6;
}
</style>