Как создать кнопку которая будет открывать плеер?

Не могу понять как это конкретно должно работать. Мне нужно создать кнопки, которые при нажатии будут открывать плеер на этой же странице, а по нажатию на следующую кнопку, плеер будет заменятся. Все что я смог сделать это кнопку, по нажатии которая перманентно меняет цвет, и открывает ссылку на плеер, но в новом окне.

label {
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 16px;
padding: 9px 5px 0;
margin: 0 2px 6px 0;
background: var(--main-button);
color: var(--light-text);
min-width: 41px;
height: 41px;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}

input[type=radio]:checked~label {
background-color: var(--main-green);
}

Попробовал использовать ifraime и javascript, получилось почти то что нужно, но больше одного видео я добавить не могу, к тому же, видео не прекращает работу после скрытия той же кнопкой. JavaScript

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
  
}

CSS

.video-button{
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    padding: 9px 5px 0;
    margin: 0 2px 6px 0;
    background: var(--main-button);
    color: var(--light-text);
    min-width: 41px;
    height: 41px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    
}

HTML

<button type="button" class="video-button" onclick="myFunction()">1</button>
    <iframe id="myDIV" src="" width="640" height="390" frameborder="0" allowfullscreen></iframe>

Я пытаюсь сделать так, чтобы после просмотра видео, можно было открыть следующее в том же месте.