Adding a dynamic caption to a video is quite easy with jQuery. All you need is a video to work with, an HTML container, some CSS styles and, of course, jQuery. For this post I've chosen a free video from Wikimedia representing a cute robin while it's feeding. This video lasts only 30 seconds or so, but it's approximately 16 Mb in size so it may take a while to view it. The original video was in Theora format, but I've converted it in MP4 format using Miro converter. Now, let's start with our HTML:
<div id="video"> <object data="Robin_feeding.mp4" type="video/mp4" width="400" height="300"> <param name="autoplay" value="true" /> </object> </div>
I've used the param element by setting its autoplay feature to true so that our video will start as soon as it's finished loading. Then a couple of CSS styles:
#video {
width: 400px;
height: 300px;
background: #000;
color: #fff;
border-radius: 0 0 10px 10px;
margin: 0 auto;
cursor: pointer;
}
#video object {
width: 400px;
height: 300px;
display: block;
}
div.caption {
width: 200px;
height: 2em;
background: #c40;
border: 2px solid #f40;
color: #fff;
font: 100% Arial, sans-serif;
border-radius: 8px;
display: block;
text-align: center;
padding: 1em 0;
margin: 5px auto;
}
Our .caption element will be inserted and hidden using jQuery. Then, when a user hovers the video container with the mouse, our caption will be shown together with a slide down effect on the video container achieved by augmenting its height. Let's see how:
$(document).ready(function() {
$('<div class="caption"/>').text('Robin feeding').appendTo('#video').hide();
$('#video').mouseover(function() {
$(this).height(380).find('div.caption').show('slow');
});
$('#video').mouseout(function() {
$(this).height(300).find('div.caption').hide('slow');
});
});
You can see the demo below.