Video Component - Video Play Icon

Is it possible to add a transparent video play icon over a video to indicate that the video can be played?

1 Like

I also noticed some other things about the video component. Not sure if I am doing something wrong, or if they are real issues:

  • documentation says that there are styling options like rounded corners for the video component, but I couldn’t find these styling options yet.
  • when clicking on the video to start play mode, it changes position, about 50% further down.

The Video component already has an “Overlay” dropzone that allows you to add any component on top of the video thumbnail. So you could drop an SVG in to the Overlay drop zone like so:

Is this what you were thinking?

1 Like

Rounded corners is available in the Borders control group. You need to enable borders, and then set the radius.

Note that you also need to ensure the Layout->Overflow setting is set to “hidden”.

1 Like

Yes @bon This is what I was thinking.

Great, that feature is already in Elements :blush:

2 Likes

Thank you so much @bon this looks really nice :slight_smile:

@bon : I played around with the video component, and I discovered these problems:

  • corners are only rounded on still images, not on the video (using YT as an external resource)
  • video is shifted down for a few pixels, see below:

What am I doing wrong?

Hi @destinations2see.

not sure if that helps. But I had a similiar issue with an overlaid blur effect. In the container there are 2 places where to specify the height under Content Layout and a bit lower under Sizing. To get rid of the line in my case I had to set on the child component the Sizing > Height to Full that fixed it for me.

Problem

Components

CleanShot 2025-02-24 at 22.36.29

Card > New Settings

Container > New Settings

Result

Problem solved. I had to play around with sizing and spacing to fix it. I was just surprised that the thumbnail looked fine while the video didn’t.

1 Like