ihk24/gfi-ihk-2024/stories/components/video/VideoComponent.js

import './video.scss';
import {createElement} from "../../_global/scripts/helpers";

export const createVideo = ({
  videoSrc = 'https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4',
  posterSrc = './dummy/placeholder-4-3.svg',
  caption = 'Lorem ipsum dolor sit amet consetetur',
  copyright = '© Marco Mustermann für Mustervideos',
}) => {
  const figure = createElement('figure', ['video']);
  const videoBox = createElement('div', ['video-box'], null, figure);
  const video = createElement('video', [], null, videoBox);
  video.src = videoSrc;
  video.controls = true;
  if (posterSrc && posterSrc.length > 0) {
    video.poster = posterSrc;
  }

  if (copyright && copyright.length > 0) {
    const copy = createElement('span', ['copyright'], copyright, videoBox);
    copy.setAttribute("aria-hidden", "true");
    createElement('span', ['sr-only'], copyright, videoBox);
  }
  if (caption && caption.length > 0) {
    createElement('figcaption', [], caption, figure);
  }

  return figure;
}