How to display/add play button on youtube image?

Posted by Zakir Sajib on Pro Webmasters See other posts from Pro Webmasters or by Zakir Sajib
Published on 2011-01-31T15:44:14Z Indexed on 2011/11/29 10:09 UTC
Read the original article Hit count: 299

Filed under:

I have embedded the youtube image from youtube server which is "http://img.youtube.com/vi/0.jpg", now there is no play button shows up on middle of the image as we see usually any youtube videos!

I tried to use the following code to get an image on top of the youtube image but it shows bigger picture, i know why

<a class="fancybox" href="#video">
<img src="/wp-content/themes/mytheme/images/play_button.png" no-repeat width: 0px height:0px; style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) transparent" width="180" height="150"/>

<div id ="video">
// here is my embedded youtube usual code
</div>

both images shown in 180 x 150 size, but thats not what i want.

I want youtube image will be shown in 180 x 150 size and play button image (play_button.png) will be display in middle of the youtube image in small size.

Any clue in css or coding in php will be great favour.

© Pro Webmasters or respective owner

Related posts about youtube