This is a simple couple of jQuery lines that takes image tags, which are links to videos, and overlays a little play icon on top.  I’ve attached it to the window load event instead of the window ready event because with some browsers (Safari if I remember correctly) the image width isn’t available on the onready event, at least not on Windows.  I used the original image tag’s width to position the icon in the lower right over the image as requested by the client.

The jQuery filter immediately following the window load line literally translates into:

• Take all anchor tags which have ‘.swf’ in them but aren’t targeting ‘_blank’ (new window) and contain image tags.  This icon is only to be displayed on videos which should play in-line using lightbox or similar.
• Same as above but the link contains ‘youtube’ and ‘/v/’.  The ‘/v/’ is the old embed code for YouTube links.

After selecting these specific anchor tags, the next line wraps them with a div with class playButtonWrap that I use, with the original image width, to include and position the play icon.

Show the code

<script>
//<!--
$(window).load(function () {
	$('a[href*=".swf"]:not([target="_blank"])>img,a[href*="youtube"][href*="/v/"]:not([target="_blank"])>img').each(function(){
		$(this).wrap('<div class="playButtonWrap" style="position:relative"></div>').parent().css({width:$(this).width()+'px',height:$(this).height()+'px',cursor:'hand'}).append('<img src="/includes/images/play.png" style="position:absolute;right:2px;bottom:2px;margin:0px"/>');
	});
});
//!-->
</script>