Вопрос? Объединить плеера

Здравствуйте! Ребята помогите, если такое возможно конечно:
Как объединить плеера в одно чтобы по кнопке Плеер 1 показывался первый плеер, по кнопке Плеер 2 показывался второй плеер, а не друг под другом в этом коде???
[xfgiven_iframe_aloha]<div>Плеер 1</div>[/xfgiven_iframe_aloha]
[xfgiven_iframe_kodik]<div>Плеер 2</div>[/xfgiven_iframe_kodik]
[xfgiven_iframe_hdvb]<div>Плеер 3</div>[/xfgiven_iframe_hdvb]
[xfgiven_iframe_bazon]<div>Плеер 4</div>[/xfgiven_iframe_bazon]
[xfgiven_iframe_aloha]<iframe src="[xfvalue_iframe_aloha]" width="100%" height="500" frameborder="0" scrolling="no" allowfullscreen></iframe>[/xfgiven_iframe_aloha]
[xfgiven_iframe_kodik]<iframe src="[xfvalue_iframe_kodik]" width="100%" height="500" frameborder="0" scrolling="no" allowfullscreen></iframe>[/xfgiven_iframe_kodik]
[xfgiven_iframe_hdvb]<iframe src="[xfvalue_iframe_hdvb]" width="100%" height="500" frameborder="0" scrolling="no" allowfullscreen></iframe>[/xfgiven_iframe_hdvb]
[xfgiven_iframe_bazon]<iframe src="[xfvalue_iframe_bazon]" width="100%" height="500" frameborder="0" scrolling="no" allowfullscreen></iframe>[/xfgiven_iframe_bazon]
Спасибо!!!

 

В шаблоне было так:
<div class="page__player tabs" id="page__player">
<div class="page__player-select tabs__select d-flex">
<div>Смотреть онлайн</div>
<div>Запасной плеер</div>
</div>
<div class="tabs__content d-none video-inside video-responsive">
<iframe data-src="
View: https://www.youtube.com/embed/I-5Op8acIN8
" frameborder="0" allowfullscreen></iframe>
</div>
<div class="tabs__content d-none video-inside video-responsive">
<iframe data-src="
View: https://www.youtube.com/embed/cU6JjGfTvr0
" frameborder="0" allowfullscreen></iframe>
</div>
{* если у вас свой адаптивный плеер, а не iframe или video, то уберите выше video-responsive *}
</div>

 

Да тут просто искал чё то новое или забытое старое, ну и решил поменять...
Спасибо завтра попробую разобраться, чё то всё равно не то получается....... вообще чё то нето....
Чёто я видать начудил с шаблоном... Вот так показывает при этом коде. Я просто в шаблоне киноточке правил всё некоторое поотключал...

 

да это понятно просто они в при таком раскладе на картинке маленький квадратик
Вот у меня кое что получилось. Убрал два плера по рекомендации. Когда страница загружается то видно два плеера, нажимаешь на Плеер В исчезает нижний плеер т.е. базон... Нажимаешь на Плеер А появляется базон, а алоха никуда не девается...
Добавляю строку [xfgiven_iframe_aloha]<div class="tabs__content d-none video-inside"> перед алохой и получается как на картинке....
[xfgiven_iframe_aloha]<div>Плеер A</div>[/xfgiven_iframe_aloha]
[xfgiven_iframe_bazon]<div>Плеер B</div>[/xfgiven_iframe_bazon]
<iframe src="[xfvalue_iframe_aloha]" width="100%" height="420" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>[/xfgiven_iframe_aloha]
[xfgiven_iframe_bazon]<div class="tabs__content d-none video-inside">
<iframe src="[xfvalue_iframe_bazon]" width="100%" height="420" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>[/xfgiven_iframe_bazon]

Всё сделал сам </div> не хватало одного после заголовков

 

Всем спасибо помогли!!!