The default gray video play button in vBulletin 5 looks dull and bland. Make it alive without using another image by using the below CSS.
Here's a screenshot of before and after:
Code:
.videothumbnail .videothumbnailoverlay { width: 50px; height: 36px; border-radius: 13px; border: solid 1px #f00; background-image: none; background-color: #f00; position: absolute; left: 50%; top: 50%; margin-left: -26px; margin-top: -18px; box-shadow: 2px 2px 8px rgba(0,0,0,0.5); } .videothumbnailoverlay:before { content: ''; display: block; position: absolute; left: 20px; top: 11px; height: 0; width: 0; border-top: solid 6px transparent; border-left: solid 5px #333; border-bottom: solid 8px transparent; border-left: solid 14px #fff; } .videothumbnail .videothumbnailoverlay:hover, .videothumbnail:hover .videothumbnailoverlay { background-image: none; border-color: #e60000; background-color: #e60000; }
Comment