React Bootstrap Webm Component with Fallback Image

BootstrapWebmComponent.tsx

type TWebmComponent = React.FC<{ videoUrl: string; fallbackUrl: string; description: string; onClick?: (e) =>void }>

const WebmComponent: TWebmComponent = ({ videoUrl, fallbackUrl, description, onClick = () => null }) => {
  const supportsWebm = !!document.createElement('video').canPlayType

  return (
    <>
      <figure className="figure">
        <a
          href={supportsWebm ? videoUrl : fallbackUrl}
          target="_blank"
          rel="noopener noreferrer"
          onClick={onClick}
        >
          <video
            preload="auto"
            loop={true}
            poster={fallbackUrl}
            autoPlay={true}
            className="figure-img img-fluid rounded img-thumbnail"
          >
            <source src={videoUrl} type="video/webm"></source>
            <source src={videoUrl} type="video/mp4"></source>
          </video>
        </a>
        <figcaption className="figure-caption text-center">{description}</figcaption>
      </figure>
    </>
  )
}