Search code examples
cssvideoplaybackvideo-thumbnails

Making a css play button on video thumbnail

I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png

Here is a demo: http://jsfiddle.net/vtPhZ/2/

The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?

The HTML snippet which generates the list: 

<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>

And the CSS I tried to use (without success):

.ytlist li > a:before {
content: "►";
}

How can I make it work?

Solution

  • I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.

    Here's a demo: http://jsfiddle.net/vtPhZ/4/

    Your method was strange but the fact that it didn't work was even more strange...