I am writing a user script for youtube, and want to insert a button with the same look and feel as the other buttons on YouTube page. Things were working in the past, but have suddenly stopped working. Have a look at the buttons in this image on top of any youtube video:

So I just noticed one thing in Firebug, these buttons include text and image sub-nodes, but are not rendering the images as simple as giving a source image url to them. The 'src' attribute of these images (the 'plus' sign image, or the 'down arrow' image) or all other such images have exactly the same URL (of a 1 x 1 image) : //s.ytimg/yt/img/pixel-vfl3z5WfW.gif. But in the end they are rendered as all these different images. As a result, when I do the same in my buttons, all other CSS properties work fine, but the images are just blank.

I just want to know from html/javascript/css experts -

1. How are they doing this?
2. How to get these finally rendered images through CSS/javascript?

Thanks!

P.S. :
-In case a moderator wants to close this question saying it is not a programming question, it is. To know how can one achieve this kind of 'undetectable' html image thing, or how can a userscript still fetch that image through javascript/html/css.
- In case a moderator wants to close this question saying it is too specific (about youtube), it is not. It is a general question about HTML, but I have seen implemented only by YouTube so far. I am a novice.

Thanks,
Piyush

I am writing a user script for youtube., and want to insert a button with the same look and feel as the other buttons on YouTube page. Things were working in the past, but have suddenly stopped working. Have a look at the buttons in this image on top of any youtube video:

So I just noticed one thing in Firebug, these buttons include text and image sub-nodes, but are not rendering the images as simple as giving a source image url to them. The 'src' attribute of these images (the 'plus' sign image, or the 'down arrow' image) or all other such images have exactly the same URL (of a 1 x 1 image) : //s.ytimg./yt/img/pixel-vfl3z5WfW.gif. But in the end they are rendered as all these different images. As a result, when I do the same in my buttons, all other CSS properties work fine, but the images are just blank.

I just want to know from html/javascript/css experts -

1. How are they doing this?
2. How to get these finally rendered images through CSS/javascript?

Thanks!

P.S. :
-In case a moderator wants to close this question saying it is not a programming question, it is. To know how can one achieve this kind of 'undetectable' html image thing, or how can a userscript still fetch that image through javascript/html/css.
- In case a moderator wants to close this question saying it is too specific (about youtube.), it is not. It is a general question about HTML, but I have seen implemented only by YouTube so far. I am a novice.

Thanks,
Piyush

• javascript
• html
• css
• image

• There are a lot of answers here, but basically all you need to do is give your button a CSS class of yt-uix-button. See my answer below. – Dagg Nabbit Commented Mar 2, 2012 at 8:34
• GGG, I was already doing that which was working perfectly, which stopped working recently. Hence this question. – Piyush Soni Commented Mar 2, 2012 at 10:04
• You're right, I'm sorry, you need to add both yt-uix-button and yt-uix-button-default as CSS class names. I'll update my answer. – Dagg Nabbit Commented Mar 2, 2012 at 10:06

4 Answers 4

This technique is called CSS sprites. It is used to reduce the amount of HTTP requests.

Basically, you have only one image with all your icons (thus you only need to load one image from the server). You would use this image as a background image on your element that has a width/height defined to the size of the icon to display and play with the css properties background-position to place the background at the top/left of the icon to display in the background image.

So the important parts are to:

• set the image as background
• set a size to your element. As the image is used as a background, it will not implicitly have a size from the image !
• set the background-position rule

YouTube is using the following image: http://s.ytimg./yt/imgbin/www-refresh-vflmpZ5kj.png

The image is 16px/16px sized and the top/left of the "plus" icon is at the position 97px/66px so they use the following background-position values:

background-image: url(//s.ytimg./yt/imgbin/www-refresh-vflmpZ5kj.png);
background-position-x: -97px;
background-position-y: -66px;
width: 16px;
height: 16px;

Further reading:

• CSS Sprites: Image Slicing’s Kiss of Death
• The mystery of CSS sprites

Generators:

• Online CSS Sprites Generator

This technique is called "CSS sprites":

• http://css-tricks./css-sprites/
• http://www.alistapart./articles/sprites
• http://coding.smashingmagazine./2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
• https://stackoverflow./search?q=css+sprites

They're using one image with all the backgrounds, and using CSS to set the height and width of the element and position the background in a way that only part of it is revealed.

In YouTube's case, they appear to be using an 1x1 blank <img> and are setting the background image on the img tag itself.

I writing a user script for youtube., and want to insert a button with the same look and feel as the other buttons on YouTube page.

Just give your button a class of yt-uix-button yt-uix-button-default and it will have the same look and feel of the other buttons. I do the same thing in my own YouTube user script.

Things were working in the past, but have suddenly stopped working.

Yeah, they changed the class names around a bit during the last big update.

Previously the class was just yt-uix-button as you pointed out in your ment, now you have to add yt-uix-button-default as well.

Here's my custom button, just to show it works ;)

Look at the CSS declaration for that tag. For example, the like button has this html:

<button onclick=";return false;" title="I like this" type="button" class="start yt-uix-tooltip-reverse  yt-uix-button yt-uix-button-default yt-uix-tooltip" id="watch-like" data-button-toggle="true" data-button-action="yt.www.watch.actions.like" role="button" data-tooltip-text="I like this">
    <img class="yt-uix-button-icon yt-uix-button-icon-watch-like" src="//s.ytimg./yt/img/pixel-vfl3z5WfW.gif" alt="I like this"><span class="yt-uix-button-content">Like </span>
</button>

And in the CSS there's a declaration:

#watch-actions .yt-uix-button-icon-watch-like {
    background: no-repeat url(//s.ytimg./yt/imgbin/www-refresh-vflmpZ5kj.png) -75px -102px;
    width: 13px;
    height: 15px;
}

www-refresh-vflmpZ5kj.png is a sprite and the background declaration positions it at -75px and -102px which is the position of the thumbs up icon.