In this post I'll show you how to create a simple overlay effect on a YouTube video. The final effect is achieved by combining CSS absolute positioning and the jQuery slideDown() and slideUp() effects. First of all, let's start with our basic markup:
<div id="youtube"> <iframe /> </div>
We want to turn the above DOM structure into this one:
<div id="youtube"> <h2>...</h2> <iframe /> </div>
We first need to set up our CSS styles:
body {
margin: 0;
padding: 2em 0;
font: 62.5% Arial, sans-serif;
}
#youtube {
width: 640px;
height: 390px;
margin: 0 auto;
position: relative;
}
#youtube iframe {
display: block;
width: 100%;
height: 100%;
}
#youtube h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: #333;
padding: 145px 0 117px 0;
font: bold 6em "Trebuchet MS", Trebuchet, sans-serif;
text-align: center;
color: #fff;
display: none;
margin: 0;
text-transform: uppercase;
}
As you can see, our overlay heading has been first absolutely positioned within its parent container and then hidden. Further, its height is tall enough to cover only the video's area but not the video controls, so that a user can always play the video without problems.
Our jQuery code is made up of two parts: first we insert our overlay element just before the video and adjust its opacity, then we create the animation effect when a user hovers the video area with the mouse:
$(function() {
$('<h2></h2>').text('jQuery tutorial')
.css('opacity', '0.8').insertBefore('#youtube iframe');
$('#youtube').hover(function() {
$(this).find('h2').stop(true, true).slideDown(1000);
}, function() {
$(this).find('h2').stop(true, true).slideUp(1000);
});
});
We use the stop() method here to get the effect of a precise animation without any trailing queues. You can see the demo below.