Soy novato, quiero mostrar videos aleatorios al cargar el sitio web, encontré este código, cambie algunas cosas y logré lo que quería, pero ahora necesito que cada video tenga una pequeña descripción y un enlace. Adjunto esta imagen. Quiero algo similar a esto, hay alguien aquí que pueda ayudarme con esto, gracias de antemano.

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>

También puede ver el código original aquí: Cambio aleatorio de src de video con JS

Solo quiero incluir esto en el código js anterior (cada video tiene una URL y una descripción diferentes)

 <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>