I am a newbie, I want to show random videos when loading the website, I have found this code, change some things and achieve what I wanted, but now I need each video to have a small description and a link I attach this image I want something similar to this, is there someone here who can help me with this, thanks in advance.

https://piic.me/img-134

<video autoplay muted loop id="OracleVid" style="display: auto; max-width:100%;">
  <source id="OracleVidSRC"/>
</video>

<script>
var clip = document.querySelector("#OracleVidSRC");
var video = document.querySelector("#OracleVid");
var oracleVidArray = [
  "http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4",
  "http://localhost/website/wp-content/uploads/2021/10/6b_xlarge_preview.mp4",
  "http://localhost/website/wp-content/uploads/2021/10/elementor1_xlarge_preview.mp4"
];


window.onload = function oracleFunction() {
  clip.src = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)];;
  //video.style = "display: block";
  video.load();
}

</script>

You can also see the original code here: Randomly changing video src with JS

I just want to include this in the js code above, (each video has a different url and description)

<figure class="wp-block-video">
     <a rel="noreferrer noopener" href="https://website.com" target="_blank">
          <video autoplay="" loop="" muted="" src="http://localhost/website/wp-content/uploads/2021/10/logitech1_xlarge_preview.mp4" playsinline="">
          </video>
     </a>
     <figcaption><strong><code><span style="color:#111111" class="has-inline-color">Description 
          </span></code></strong><a rel="noreferrer noopener" href="https://website.com" target="_blank">website.com</a></figcaption>
</figure>