How do you create a video placeholder image

Design help General
1

Take a look at this website:

Do you see how the video is an image with a link in the middle. When clicked the image disappears and the video plays. What’s the best way to do this. I think I need to:

  • Make the image the exact same size as the video
  • Make the image absolute
  • Slide it in front of the video so it covers it
  • Add a button in the middle of the image (which is actually a div block with an image background and a button in the middle)
  • Make the image div disappear when the button is pressed

EXCEPT - in my example I would need to press play on the youtube video again whereas on this website it just plays straight away.

How is has this been achieved?

2

Is a light box the option?
You get an image which you click, then plays the video.

3

Ahh, popups, not so good.
I think there is a built in webflow class you can set to turn this off but don’t quote me.

I found the classes but it just size of popup.
The way I do it and I guess others do as well is embed.
Default youtube embed hits your pagespeed score bad, so lazyloading which is a whole topic is a must.

Lets see if others come up with better options.