Home/ Questions/Q 7577513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T17:12:25+00:00

I am writing a user script for youtube.com, and want to insert a button

  • 0

I am writing a user script for youtube.com, 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:

YoutubeTopButtons

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.com/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.com), 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.com/yt/imgbin/www-refresh-vflmpZ5kj.png

    enter image description here

    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.com/yt/imgbin/www-refresh-vflmpZ5kj.png);
background-position-x: -97px;
background-position-y: -66px;
width: 16px;
height: 16px;

    Further reading:

    Generators:

    • 0