8

Given the following video element:

<video class="Hero__video" width="1280" height="720" preload="true" autoplay="true" loop="loop" muted="muted" volume="0" poster="/assets/hero-cover.jpg">
  <source src="/assets/hero.webm" type="video/webm">
  <source src="/assets/hero.mp4" type="video/mp4">
</video>

Is there a way to set the poster to be webp with a fallback to jpg?

From my understanding, the only work around is to have an element positioned absolutely below it:

<picture class="Hero__poster">
  <source srcset="/assets/hero-cover.webp" type="image/webp">
  <source srcset="/assets/hero-cover.jpg" type="image/jpeg">
  <img src="/assets/hero-cover.jpg">
</picture>
Chris
  • 54,599
  • 30
  • 149
  • 186
  • there isn't a fallback in the video poster, but what you could so is have a server side handler that checks the `accept` header for `image/webp` and if not found serve a jpg instead – Offbeatmammal Jan 27 '20 at 05:32

1 Answers1

0

the absolute element is the easiest choice, otherwise you should create a function that can figure out if webp is supported. here is a link with some solutions that might be useful to you

Detecting WebP support

LoreMaru
  • 11
  • 3