0

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

Yazan Alaws
  • 9
  • 3

1 Answers1

0

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>
Diego D
  • 6,156
  • 2
  • 17
  • 30
  • Hi thanks for your suggition I need to include the play button in the link preview for 3rd party site if a user shared a video from my platform I need the link preview to have a play button over the thumbnail – Yazan Alaws Apr 06 '22 at 15:11
  • that scenario doesn't change the problem. But the solution I proposed is very raw and there's not a concrete example using a real play image. Plus I didn't like the raster option but it requires harder attempts to get something better than that. So good luck and I hope someone else will suggest something better – Diego D Apr 06 '22 at 15:26