Merhaba;
Konu ile alakalı hızlıca hazırladığım bir mantık ile kolaylıkla bu problemi aşabilirsiniz. css' de bulunan :after / :before komutları fazlasıyla işinizi görebilir. Örnek olarak sizin yapınız üzerinden yazıyorum. Bir problem olursa yardımcı olmaya çalışırım. İlk önce açıklamayı yazıyorum. En alt satırda da kodları yazıyorum.
İlk olarak video resminizi bir div içine alabilirsiniz (videolar_resim). Daha sağlıklı olacaktır diye düşünüyorum. Ardından css' in :after komutu ile play ikonu üzerine yerleştirip absolute ile konumunu ayarlayabilirsiniz. Bu arada hızlı hazırlama açısından ben font awesome kullandım. siz kendi ikon' unuzu belirleyebilirsiniz. font awesome' a ait css dosyasını import ettim zaten. İnceleyince anlayacaksınızdır sizde.
<style>
///.... sizin css kodlarınız.....
@import url(
http://maxcdn.bootstrapcdn.com/font-...some.min.css);
.videolar_resim{ position:relative; width:200px; height:200px;}
.videolar_resim img{ width:100%; height:100%}
.videolar_resim a:after{ content:"\f144"; font-family:FontAwesome; position:absolute; left:44%; top:40%; z-index:888; color:#fff; font-size:36px; display:none;}
.videolar_resim a:hover:after{ display:block;}
</style>
<html>
<div class="videolar">
<div class="videolar_resim"><a href="#"><img src="resim.jpg" alt="ilginç videolar"/></a></div>
<div class="videolar_baslik"> <a href="#">video ismi</a></div>
</div>
</html>