jQuery: dynamic video caption

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" />

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() {



 $('#video').mouseout(function() {




You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Comments are closed.