display a play button over videos thumbnails in link privew [duplicate]

Question

I am working on a video sharing platform, the platform automatically generates a thumbnail for uploaded videos and I use these thumbnails for the link preview on other sites but I want to add a play button over the og:image like the image below dailyMotion link previw

Does anyone knows how can I achieve that thank you

Answer 1

This is a very basic example modeling a video inside a .video-container with a .video-thumbnail element and a .play-button element. All you have to do is choosing a background image for the play button that will be rendered with a transparent background as long as the transparency is handled in the picture. Otherwise you should opt for vector-graphics solutions like I found here https://css-tricks.com/making-pure-css-playpause-button/ and here https://codepen.io/chrisdwheatley/pen/WNZjjJ for example.

This is my attempt:

 <style>
        .video-container{
          position: relative;
          /*faking its size because I don't have a real video*/
          width: 320px;
          height: 180px;
          background: blue;
        }
    
        .play-button {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: transparent;
          /*here you can choose your picture for the play button*/
          background-image: url('http://...');
        }
    </style>
    
    <div class="video-container">
        <img class="video-thumbnail" />
        <div class="play-button"></div>
    </div>