Here’s a quick method to add a play button to video thumbnails. This is useful when you generate dynamic thumbnails for videos, or grab them from a video hosting service, in this case, YouTube.
The HTML
<a class="video-thumb-wrapper"
href="//www.youtube.com/embed/myk22AuwizE">
<img class="video-thumb" width="280" height="200"
src="//img.youtube.com/vi/myk22AuwizE/0.jpg" />
</a>
The CSS
.video-thumb-wrapper { display: block; width: 280px; height: 200px;
background: url('/img/play.png') center center no-repeat; }
.video-thumb { filter: alpha(opacity = 40); opacity: .4; }
/* set width and height of the wrapper to the width and height of the thumbnail itself */
Add a lightbox to the video-thumb-wrapper class to make it even more functional.
Hi Phil my name is Maxi from Italy and my english is bad.
Your play button ccs is “super” and good work.
But if I remove the trasparency in “.video-thumb” the play button image don’t see.
I have question for you:
If I want no trasparency image how I make?
Thanks
Maxi
Hey Maxi,
I like this way because it doesn’t involve adding any additional HTML markup.
But, you could try something like this, which completely eliminates the need for an arrow graphic.
.video-thumb-wrapper { position: relative; display: block; width: 280px; height: 200px;
background: url(‘play.png’) center center no-repeat; }
.video-thumb-wrapper div { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -25px; border-left: 50px solid #eee; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
Use this tool http://www.giikers.com/iwc to Play button on video thumbnails
It’s a good tool, but doesn’t really help with overlaying play buttons “on-the-fly”.
If you only have a couple images, great, but if you’re image content is at all dynamic, you’re better off overlaying a play button image.