Is it possible to add a transparent video play icon over a video to indicate that the video can be played?
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?
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”.
Yes @bon This is what I was thinking.
Great, that feature is already in Elements
Thank you so much @bon this looks really nice
@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?
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
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.