Video Poster Image

How To
1

Hello,
how can I add a poster frame to a self hosted video?
Can’t find the option and on mobile without a poster frame it looks ugly.

Or is there a workaround?

Thanks,
Sven

2

Hi Sven,

You can already choose an overlay and a custom icon for your video.

image
image576×1450 40.1 KB

Best regards,
timmse

3

Thanks but on iOS I don’t see the overlay.

IMG_2615
IMG_2615592×1280 85.4 KB

Any idea?

Greetings.

4

Haha yes, you found some kind of a bug :smiley:
If you add the overlay at desktop breakpoint, it will show up, even on mobile.

Unfortunately, it is not possible to show the overlay only on mobile, as the setting inserts a whole new element to the DOM, but you can hide it with custom CSS on larger breakpoints.

Add this custom CSS to your video element (style > css > custom css) and it will hide the overlay and icon on screens larger than 768px, but show them on smaller screens.

@media (min-width: 768px) {
  root .bricks-video-overlay,
  root .bricks-video-overlay-icon {
    display: none;
  }
}

Best regards,
timmse

5

Thanks. Now it shows up.

1 Like