如何制作像Facebook的视频缩略图[CSS]

我期待在Facebook上制作视频缩略图，但我无法通过缩略图像Facebook上那样获得播放按钮。如何制作像Facebook的视频缩略图[CSS]

alt text

CODE

HTML

<a href="watch-video.php?c=1244"> 
    <img src="http://img.youtube.com/vi/X0OdLlX-cIw/1.jpg"> 
    <b></b> 
</a>

CSS

.wall_video a {display: block; width: 128px; height: 96px; padding: 4px; border: 1px solid #cccccc; position: relative} 
.wall_video a img {display: block; width: 128px; height: 96px; } 
.wall_video a b {background: url(images/play-icon.png) no-repeat; display: block; width: 28px; height: 30px; position: absolute;}

当我尝试浮动img时，按钮位于最上方。起初，我认为它的立场：相对和负的顶部利润率，但是当我检查Facebook的来源时，他们不使用相对定位。

来源

2010-08-28 Atif Mohammed Ameenuddin

注意：你最好使用更多的语义元素，或者更确切的说，因为没有一个元素*没有像''这样的语义含义。 – DisgruntledGoat 2010-08-28 12:13:30

.wall_video a b { 
    /* ... */ 
    position: absolute; 
    left: 5px; 
    bottom: 5px; 
}

来源

2010-08-28 11:35:41

如何制作像Facebook的视频缩略图[CSS]

回答

相关问题