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

    Free Mod 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:	2267
Size:	10.6 KB
ID:	7089

    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #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


            #8
            Thnaks!!!

            Comment


              #9
              Working great on 5.6.3, thank you

              Comment

              Users Viewing This Page

              Collapse

              There is 1 user viewing this forum topic.

              • Guest Guest

              Latest Posts

              Collapse

              Working...
              X
              Searching...Please wait.
              An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

              Please push the back button and reload the previous window.'
              An unexpected error was returned: 'Your submission could not be processed because the token has expired.

              Please push the back button and reload the previous window.'
              An internal error has occurred and the module cannot be displayed.
              There are no results that meet this criteria.
              Search Result for "|||"