Hero - Homepage with video

<figure class="mp c-hero c-hero--homepage c-hero--homepage-video">
  <div class="u-wrap">
    <div class="c-hero__content">
      <header class="u-flow--m">
        <h1 class="c-h c-h--page-title">We&#39;re big on small.</h1>
        <p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>
      </header>
      <div class="c-hero__button-wrap">
        <button type="button" class="mp c-button c-button--inline" >About Malvern Panalytical</button>
      </div>
    </div>
  </div>
  <div class="c-hero__video-bg" style="background-image:url(https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60);">
    <video id="videoBackground" autoplay loop>
      <source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
    </video>
  </div>
  <canvas class="c-hero__canvas"></canvas>
  <div class="c-hero__video-button-wrap">
    <button type="button" class="mp c-button c-button--outline-white"  id=playVideo>Play video</button>
  </div>
</figure>
<div id="lightboxVideo" class="c-lightbox u-hidden">
  <div class="c-lightbox__close">
    <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
      <use xlink:href="/static/svg/sprite.svg#cross"></use>
    </svg>
  </div>
  <div class="c-lightbox__slide active">
    <video class="c-lightbox__video" controls controlslist="nodownload">
      <source src="https://p3.aprimocdn.net/malvernpanalytical/304f04aa-ae04-4bed-9946-ae3101152327/PN12593_Brand_Movie_Malvern_Panalytical_MIX_0dBfs_website_header_Original%20file.mp4" type="video/mp4">
    </video>
  </div>
</div>

{
  "title": "We're big on small.",
  "subtitle": null,
  "content": "<p>We make scientific instruments and services that make the invisible visible, and the impossible possible.</p>",
  "videoplaceholder": {
    "src": "https://p3.aprimocdn.net/malvernpanalytical/bf169dc6-9edb-4609-9ba8-add301206d1e/bridge-bg_Original%20file.webp?quality=60"
  },
  "shortvideo": [
    {
      "src": ""
    },
    {
      "type": "video/mp4"
    }
  ],
  "longvideo": [
    {
      "src": ""
    },
    {
      "type": "video/mp4"
    }
  ],
  "cta": {
    "label": "About Malvern Panalytical",
    "link": ""
  },
  "homepage": "dark"
}