JSFiddle - React, Tailwind, and code Playground

HTML

<div class="js-video-container"></div>
<template class="js-video-template">
  <iframe class="js-video elementor-background-video-embed" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360"></iframe>
</template>

JavaScript

// Interface w/ HTML
var SELECTORS = {
  VIDEO_CONTAINER: '.js-video-container',
  VIDEO_TEMPLATE: '.js-video-template',
  VIDEO: '.js-video'
};

var VIDEO_DATA_LIST = [
  { src: 'https://www.youtube.com/embed/qoXa-tTkitg' },
  { src: 'https://www.youtube.com/embed/iphcyNWFD10' },
  { src: 'https://www.youtube.com/embed/IvUU8joBb1Q' },
  { src: 'https://www.youtube.com/embed/zGxwbhkDjZM' }
];

function getRandomArrayItem(array) {
  return array[Math.floor(Math.random() * array.length)];
}

function insertRandomVideo(templateElement, parentElement, videoSelector, videoDataList) {
  var videoData = getRandomArrayItem(videoDataList);

  // Create a videoElement from the template
  var videoElement = templateElement.content.cloneNode(true).querySelector(videoSelector);
  
  // Add dynamic data to the cloned element
  videoElement.src = videoData.src; // NOTE: videoData gets repeated if you use more properties

  // Add the cloned element to the parent/container
  parentElement.appendChild(videoElement);
}

// Run the function
insertRandomVideo(
  document.querySelector(SELECTORS.VIDEO_TEMPLATE),
  document.querySelector(SELECTORS.VIDEO_CONTAINER),
  SELECTORS.VIDEO,
  VIDEO_DATA_LIST
);