开发者

How to display/add play button on youtube image?

开发者 https://www.devze.com 2023-02-07 13:14 出处:网络
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 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 开发者_JS百科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.


I sorted out quite easily. Just create an image with play button middle and make the surround transparent and then I put this image on top of the youtube thumbnail image. it worked, but video image gets realigned, but it does not look bad though.

<a class="fancybox" href="#bizgenevideo">
<img src="/wp-content/themes/mytheme/images/play-button.png" style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) " width="180" height="148"/>


You can also use a web service

the halgatewood service was taken down, guess too many people bombarded him :) now it is on github

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/ https://github.com/halgatewood/youtube-thumbnail-enhancer

Here is another service that does the same thing (as suggested by muktesh patel):

http://www.giikers.com/iwc

old answer:

http://halgatewood.com/youtube/

Like this: http://halgatewood.com/youtube/i/youtube_id.jpg

For example: http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg

Related question: How to overlay a play button over a YouTube thumbnail image

0

精彩评论

暂无评论...
验证码 换一张
取 消