I want to make this code when I play some videos

Question

I want to do this code as one of those pictures, but I can't. but I have a problem wanting to make videos like this picture for example when someone puts the video down 50 videos to work as small as the window below https://ibb.co/7Ndwbzt

Or if you can do this to me this way, I thank the person for being able to specify how many videos to be opened as the picture below https://ibb.co/M83VJKd

function youtubeUrlParser(url) {
  
  var timeToSec = function(str) {
    var sec = 0;
    if (/h/.test(str)) { sec += parseInt(str.match(/(\d+)h/,'$1')[0],10) * 60 * 60; }
    if (/m/.test(str)) { sec += parseInt(str.match(/(\d+)m/,'$1')[0],10) * 60; }
    if (/s/.test(str)) { sec += parseInt(str.match(/(\d+)s/,'$1')[0],10); }
    return sec;
  };
  
  var videoId = /^https?\:\/\/(www\.)?youtu\.be/.test(url) ? url.replace(/^https?\:\/\/(www\.)?youtu\.be\/([\w-]{11}).*/,"$2") : url.replace(/.*\?v\=([\w-]{11}).*/,"$1");
  var videoStartTime = /[^a-z]t\=/.test(url) ? url.replace(/^.+t\=([\dhms]+).*$/,'$1') : 0;
  var videoStartSeconds = videoStartTime ? timeToSec(videoStartTime) : 0;
  var videoShowRelated = ~~/rel\=1/.test(url);
  
  return {
    id: videoId,
    startString: videoStartTime,
    startSeconds: videoStartSeconds,
    showRelated: videoShowRelated
  };
  
}; // youtubeParser();


// Demo-only Stuff
var input = document.querySelector('input[type="text"]');
input.focus();
var button = document.querySelector('input[type="button"]');
var output = document.querySelector('output');
var figure = document.querySelector('figure');

var outputResult = function() {
  var video = youtubeUrlParser(input.value);
  figure.innerHTML = '<iframe src="https://www.youtube.com/embed/' + video.id + '?' + (video.startSeconds ? 'start=' + video.startSeconds + '&amp;' : '') + 'enablejsapi=1&amp;autohide=1&amp;color=white&amp;controls=1&amp;playsinline=1&amp;rel=' + video.showRelated + '&amp;autoplay=true&amp;showinfo=0&amp;theme=light&amp;wmode=transparent"  allowfullscreen></iframe>';
  output.textContent = 'ID: ' + video.id + (video.startString ? ' | Start @ ' + video.startString.replace(/t\=/,'').replace(/[a-z]/g,':').replace(/\:$/,'') : '');
};

button.addEventListener('click', outputResult);
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) { outputResult(); }
});

body {
  font-family: "Georgia";
  background: #222;
  color: #888;
}

h1 {
  font-size: 32.5px;
}
h1 span {
  color: #e62117;
  font-weight: bold;
}

em {
  color: #e62117;
}

input {
  padding: 5px;
  background: #888;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 24px;
}
input[type="text"] {
  width: 44%;
  height: 35px;
}
input[type="text"]:focus {
  outline-color: #e62117;
}
input[type="button"] {
  height: 45px;
  margin-left: 5px;
  background: #e62117;
  font-weight: bold;
  cursor: pointer;
}
input[type="button"]:hover {
  background: #0c0;
}

output {
  display: block;
  margin: 5px 0;
  color: #888;
}

figure {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin: 25px 0 0;
}
figure iframe,
figure object,
figure video,
figure embed,
figure div,
figure .BrightcoveExperience {
  position: absolute;
  top: 0;
  left: 0;
  width:  !important; /* Override inline styles from BrightCove */
  height: !important; /* Override inline styles from BrightCove */
  border: none;
}

<h1><span>Home4T</span> YT player</h1>
<p>Completing  <em>4,000</em>, <em> public watch hours</em>, a- in a short time through <em>Free</em></p>

<input type="text" placeholder="URL, embed URL, playlist URL, partial URL, or ID"/>
<input type="button" value="Play Video"/>
<output></output>
<figure><!-- injected iframe here --></figure>