Как собрать плейлист из нескольких iframe видео

Всем привет, как собрать свой плейлист из нескольких iframe видео?

 

думал может есть конструкторы какие-то

 

Помог ии, вот если кому понадобиться

HTML:

<select id="episodeSelect" onchange="changeEpisode()">
  <option value="1">Серия 1</option>
  <option value="2">Серия 2</option>
  <option value="3">Серия 3</option>
  <option value="4">Серия 1</option>
  <option value="5">Серия 2</option>
  <option value="6">Серия 3</option>
  <option value="7">Серия 1</option>
  <option value="8">Серия 2</option>
  <option value="9">Серия 3</option>
  <option value="10">Серия 3</option>
  <option value="11">Серия 3</option>
  <!-- Добавьте дополнительные опции для каждой серии -->
</select>

<div id="video1" class="video-container active">
  <iframe width="560" height="315" src="[MEDIA=youtube]ВИДЕО_ID_1[/MEDIA]
View: https://www.youtube.com/embed/ВИДЕО_ID_1
" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div id="video2" class="video-container">
  <iframe width="560" height="315" src="[MEDIA=youtube]ВИДЕО_ID_2[/MEDIA]
View: https://www.youtube.cm/embed/ВИДЕО_ID_2
" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div id="video3" class="video-container">
  <iframe width="560" height="315" src="[MEDIA=youtube]ВИДЕО_ID_3[/MEDIA]
View: https://www.youtube.cm/embed/ВИДЕО_ID_3
" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
          
<style>
  .video-container {
    display: none;
  }
  .active {
    display: block;
  }
</style>
<script>
  function changeEpisode() {
    var selectBox = document.getElementById("episodeSelect");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    var videos = document.getElementsByClassName('video-container');
    for (var i = 0; i < videos.length; i++) {
      videos.classList.remove('active');
    }
    document.getElementById('video' + selectedValue).classList.add('active');
  }
</script>