Кто подскажет как сделать 2 плеера что бы пользователь мог переключать?

вопрос

Вопрос почти в шапке. Но опишу проблему. На некоторых сайтах я наблюдал что можно смотреть с разных плееров. то есть указано там Плеер 1 рядом Плеер 2 и Плеер 3. Пользователь сам выбирает где ему смотреть на каком плеере. Так вот как можно такое осуществить? Есть в шаблоне стандартный плеер у меня и я вставил еще от uppod плеер и он показывается, а вот стандартный убран. Вот хочу сделать что бы можно было переключаться с одного плеера на другой. Надеюсь поможете можно в лс.

Ответил: Decart

У меня реализовано так.

HTML:

<div class="tabs"><input id="tab1" type="radio" name="tabs" checked="checked">
<label for="tab1">ПЛЕЕР 1</label>
<input id="tab2" type="radio" name="tabs"><label for="tab2">ПЛЕЕР 2</label>
<section id="content1"><p style="text-align: center;">КОД ПЛЕРА 1</p>
</section>
<section id="content2"><p style="text-align: center;">КОД ПЛЕРА 2</p></section>
</div>

CSS:

/* Вкладки / Переключатели Begin */
/* Базовый контейнер табов */
.tabs {min-width: 320px;max-width: 800px;padding: 0px;margin: 0 auto;}
/* стили секций с содержанием */
section {display: none;padding: 15px;background: #fff;border: 1px solid #ddd;}
.tabs input {display: none;}
/* стили вкладок (табов) */
.tabs label {display: inline-block;margin: 0 0 -1px;padding: 12px 25px;font-weight: 600;text-align: center;color: #fff;border: 1px solid #ddd;background: #535865;}
/* изменения стиля заголовков вкладок при наведении */
.tabs label:hover {background: #626877;cursor: pointer;}
/* стили для активной вкладки */
.tabs input:checked + label {color: #fff;border: 1px solid #ddd;/* border-top: 1px solid #0093D7; */border-bottom: 1px solid #fff;background: #f05430;}
/* активация секций с помощью переключателя :checked */
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4 {display: block;}
/* медиа запросы для различных типов носителей */  
@media screen and (max-width: 680px) {.tabs label {font-size: 0;} .tabs label:before {margin: 0;font-size: 18px;}}
@media screen and (max-width: 400px) {.tabs label {padding: 15px;}}
/* Вкладки / Переключатели End */

Стили меняй по своему вкусу.