Como poner tabs o pestañas a los videos

Bueno este tutorial es de como poner y utilizar las tabs en los vídeos.

1. Vamos a edicion HTML y buscamos la etiqueta ]]></b:skin> y antes agregamos lo siguiente:

/* CSS Tabs jQuery */
.tabs{
margin: 0;
padding: 0;
}
.contenedor_tab{
color: #999;
float: left;
clear: both;
display: block;
width: 100%;
background-color: #F8F8F8;
margin-top: -1px;
border: 1px solid #E8E8E8;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #E0E0E0;
border: 1px solid #F8F8F8;
outline: 1px solid #E8E8E8;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: black;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover{background:#f8f8f8;
}
ul.tabs li.activa{
color: #999;
background-color: #F8F8F8;
outline: 0;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

2. Buscamos la etiqueta </head> y antes agreamos esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

3. Lo siguiente lo colocaremos en las entradas donde queramos mostrar los videos:

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>
<div id="tab2" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>
<div id="tab3" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>
</div>
<div style="clear:both;">
</div>

para agregar o quitar una opción agregamos:

<div id="tab4" class="contenido_tab">
AQUI CODIGO REPRODUCTOR
</div>

y mas arriba una linea con el mismo numero de tab osea tab4 :

<li><a href="#tab4">Opción 4</a></li>

eso es todo en este tutorial :) Espero que les aya servido dudas ? deja un comentario.