Обсуждение 2 плеера и 1 трейлер

[Wanderer]

Всем привет. Помогите советом как на сайте можно разместить в виде табов 2 плеера и 1 трейлер.
Получилось только 1 плеер и 1 трейлер, а нужно 2 плеера зафигачить и рядом трейлер.

Вот код сайта:

<div class="player-section">
    <ul class="tabs nowrap">
        [xfgiven_player]<li class="current">Плеер 1</li>[/xfgiven_player]
        [xfgiven_trailer]<li [xfnotgiven_player]class="current"[/xfnotgiven_player]>Трейлер</li>[/xfgiven_trailer]
    </ul>
    [xfgiven_player]
        <div class="player-box visible full-text">
            <iframe src="[xfvalue_player]" width="610" height="370" frameborder="0" scrolling="no" style="overflow: hidden;" allowfullscreen></iframe>
        </div>
    [/xfgiven_player]
    [xfgiven_trailer]
        <div class="player-box full-text [xfnotgiven_player]visible[/xfnotgiven_player]">
          [xfvalue_trailer]
        </div>
    [/xfgiven_trailer]
</div>

2 фала скрина прикрепляю как сейчас стоит и как хотелось бы реализовать.

В дальнейшем отблагодарю чем смогу, забыт или забыта не будет 😵

 

[Chingis]

Спойлер: Табы

<div class="section section-players">
<ul class="tabs">
[xfgiven_rekla]<li class="current">Плеер №1</li>[/xfgiven_rekla]
[xfgiven_moonwalk]<li [xfnotgiven_rekla]class="current"[/xfnotgiven_rekla]>Плеер №2</li>[/xfgiven_moonwalk]
[xfgiven_hdgo]<li [xfnotgiven_rekla][xfnotgiven_moonwalk]class="current"[/xfnotgiven_rekla][/xfnotgiven_moonwalk]>Плеер №3</li>[/xfgiven_hdgo]
<li [xfnotgiven_rekla][xfnotgiven_moonwalk][xfnotgiven_hdgo]class="current"[/xfnotgiven_moonwalk][/xfnotgiven_rekla][/xfnotgiven_hdgo]>Трейлер</li>
</ul>
<div style="clear:both"></div>
[xfgiven_moonwalk]
<div class="box visible" style="background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">
<iframe src="[xfvalue_moonwalk]" width="620" height="400" frameborder="0" scrolling="no" style="overflow: hidden;" allowfullscreen></iframe>
</div>
[/xfgiven_moonwalk]
[xfgiven_rekla]
<div class="box [xfnotgiven_rekla]visible[/xfnotgiven_rekla]" style="background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">
<iframe src="[xfvalue_rekla]" width="620" height="400" frameborder="0" scrolling="no" style="overflow: hidden;" allowfullscreen></iframe>
</div>
[/xfgiven_rekla]
[xfgiven_hdgo]
<div class="box visible" style="background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">
<iframe src="[xfvalue_hdgo]" width="620" height="400" frameborder="0" scrolling="no" style="overflow: hidden;" allowfullscreen></iframe>
</div>
[/xfgiven_hdgo]
[xfgiven_trailer]
<div class="box [xfnotgiven_rekla][xfnotgiven_moonwalk][xfnotgiven_hdgo]visible[/xfnotgiven_moonwalk][/xfnotgiven_rekla][/xfnotgiven_hdgo]" style="background-color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">
[xfvalue_trailer]
</div>[/xfgiven_trailer]
</div>

 

[nylmen]

смотрю на эти табы и думаю кода лишнего и доп полей лишних 80%

 

[Chingis]

Почему же? 3 вкладки табов, которые будут выводиться по очереди, тоеть если 1 нет то 2, и т.д. естестввенно подредактировать под себя

 

[Wanderer]

Не подходит вариант. У меня под Moviegrovie2. че то и вправду слишком много кода, но всё равно спасибо. Может ещё кто скинет у кого как выведено.

 

[nylmen]

<div class="player-section">
   
                <ul class="tabs nowrap">
                    <li class="current">Плеер 1</li>
                    <li>Плеер 2</li>
                    <li>Терйлер</li>
                </ul>
               
        <div class="player-box visible full-text">
                  тут вывод  плеер 1
        </div>
        <div class="player-box full-text">
           тут вывод  Плеер 2
        </div>
        <div class="player-box full-text">
           тут вывод Трейлер
        </div>
       
    </div>

 

[Wanderer]

У меня получилось благодаря вашим советам и моим правкам:
Вот код:

Спойлер: КОд на 2 плеера

<div class="player-section">
    <ul class="tabs nowrap">
        [xfgiven_player]<li class="current">Плеер 1</li>[/xfgiven_player]
        [xfgiven_hdgo]<li>Плеер 2</li>[/xfgiven_hdgo]
        [xfgiven_trailer]<li [xfnotgiven_player][/xfnotgiven_player]>Трейлер</li>[/xfgiven_trailer]
    </ul>
    [xfgiven_player]
        <div class="player-box visible full-text">
            <iframe src="[xfvalue_player]" width="610" height="370" frameborder="0" scrolling="no" style="overflow: hidden;" allowfullscreen></iframe>
        </div>
    [/xfgiven_player]
        [xfgiven_hdgo]
        <div class="player-box visible full-text">
            <iframe src="[xfvalue_hdgo]" width="610" height="370" frameborder="0" scrolling="no" style="overflow: hidden;" allowfullscreen></iframe>
        </div>
    [/xfgiven_hdgo]
    [xfgiven_trailer]
        <div class="player-box full-text [xfnotgiven_player]visible[/xfnotgiven_player]">
          [xfvalue_trailer]
        </div>
    [/xfgiven_trailer]
</div>

Правда есть 1 косяк, когда заходишь в новость то сразу видно 2 плеера, 1-ый самый вверху, дальше идет снизу 2-ой. Стоит только нажать на одну из вкладок 1 или 2 плеер они собираются вместе и работают нормально.
Кто-нибудь подскажет как можно это решить?

 

[Chingis]

ul.tabs{line-height:26px;list-style:none;padding:0px;}
.tabs li{float:left;display:inline;list-style:none;cursor:pointer;padding:0 20px;position:relative;text-align:center;font-weight:bold;text-shadow:#000 1px 1px 1px;color:rgb(201, 201, 201);height:28px;}
.tabs li:hover{padding:0 20px;background:#a8a8a8;color:rgb(1, 1, 1);text-shadow:#fff 1px 1px 1px;}
.tabs li.current{background:rgb(26, 26, 26);padding:0 20px;text-align:center;cursor:default;}
.tabs li.current:hover{padding:0 20px;background:rgb(26, 26, 26);text-shadow:#000 1px 1px 1px;color:rgb(201, 201, 201);}
.section-players .box{display:none;}
.section-players .box.visible{display:block;}

держи css

 

[Wanderer]

Доработал код, да там дело было в стилях css на одном плеере оставил visible на других убрал