Background Video generating a .jpg in the data-poster-url property

I have a background video added to my website. Somehow, it automatically generated a data-poster-url with a .jpg taken as a snapshot from the video. I have no control over this .jpg, which is pretty annoying.

The reason it is annoying is, that google lighthouse (SEO) is telling me to use more or less a .webp format. Since I can not control the generated .jpg I can not increase my website’s performance.

Any help would be appreciated.


Here is my site Read-Only: my-website

Blockquote

Hey @geosalon, Try to include you read-only link.
It’s hard to say why it might be, depends oh you created this Video Element.

Webflow does not currently have a setting for that, but you can override the setting using script.

Add this script and the wfu-data-poster-url custom attribute, and you can override it with whatever you like.

WEBP’s work as well, as shown on the demo page.

https://webflow-video-tests.webflow.io/video-poster-images

Is there any other solution to this? It’s strange why Webflow don’t set the format to .webp or .avif to video posters natively.

Couldn’t say, it’s worth raising a ticket to support.

My library approach works well above. You could also build a reverse proxy to replace that attribute with your own URL content.

You could also ditch the background video element and build the same construction using custom elements. You’d need to handle any special mechanics that webflow.js does on your own, but you could still use the same Webflow video URLs if you like.

1 Like