Announcement

Collapse
No announcement yet.

Replace Default Gray Video Play button with YouTube-like icon using pure CSS

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Replace Default Gray Video Play button with YouTube-like icon using pure CSS

    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.

    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;
    }
    Here's a screenshot of before and after:

    Click image for larger version

Name:	video-play-icon-min.png
Views:	1
Size:	10.6 KB
ID:	7089


    #2
    Awesome!

    Comment


      #3
      This is a nice mod.
      The Coffee is on me

      Comment


      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Thank you!

      #4
      Thanks!

      Comment


        #5
        I am guessing that this goes in the css_additional.css?

        Comment


        • NumNum
          NumNum commented
          Editing a comment
          That is correct.

        #6
        Thanks!

        Comment


          #7
          Thanks Glenn. Very nice.

          Comment

          Working...
          X