♣『Recursos Creepy World』☯: [Tutorial] Poner un video con varias opciones (IdTabs AnimeID.Tv)

Holaaaaaa! como están? espero que bien hoy les traigo un pequeño tutorial de como poner un vídeo con varias opciones estilo AnimeID.Tv

VISTA PREVIA

Empezemos

1.Buscamos la etiqueta </head> y antes de ella agregamos las siguientes librerias:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' ></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});</script>

2.Agregamos las siguientes lineas antes de la etiqueta ]]></b:skin>

/* CSS Tabs AnimeID.Tv jQuery */.tab_container {width: 100%;padding: 10px 5px 05px;margin: 0;}.tab_content {width:568px;height:340px;background:black url('http://dl.dropbox.com/u/6188287/files/template/load-cap.gif') no-repeat 50% 325px;box-shadow:0 1px 1px #BBB;overflow:hidden;margin:0 auto;position:relative;text-align:center;}ul.tabs {margin: auto auto;}ul.tabs li:first-child:last-child{border-radius:4px 4px 0 0}ul.tabs li:first-child{border-radius:4px 0 0 0}ul.tabs li:last-child{border-left:1px solid #4b6170;border-right:1px solid #4b6170;border-radius:0 4px 0 0;}ul.tabs li {list-style:none;padding:10px;margin:0;display:table-cell;text-align:center;box-shadow:inset 0 1px 0 0 #8da4b3,0 1px 2px rgba(0,0,0,0.2);background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#6c899c),color-stop(1,#4b6170));background:-moz-linear-gradient(center top,#6c899c 5%,#4b6170 100%);background-color:#6c899c;border-top:1px solid #4b6170;border-bottom:1px solid #4b6170;border-left:1px solid #4b6170;border-right:0;color:white;font-family:arial;font-size:9px;text-transform:uppercase;text-decoration:none;text-shadow:0 1px 0 #354752;opacity:.9;line-height:8px;cursor:pointer;position:relative;-webkit-transition:opacity 300ms ease-in-out;-moz-transition:opacity 300ms ease-in-out;width:128px;}ul.tabs li a {text-shadow:0 -1px 0 #233641;color:white;text-decoration: none;}ul.tabs li:hover {color:white;} html ul.tabs li.active, html ul.tabs li.active {background:-webkit-linear-gradient(#3e5664,#a7a7a7);background:-moz-linear-gradient(#3e5664,#a7a7a7);box-shadow:none;opacity:1;text-shadow:0 -1px 0#233641;border:0color:white;}

3. Agregamos lo siguiente en la entrada donde se mostrara la caja de videos modificando lo que se encuentra en color blanco

<div class="tab_container">
<center>
<ul class="tabs">
<li><a href="#tab1">Opcion 1</a></li>
<li><a href="#tab2">Opcion 2</a></li>
<li><a href="#tab3">Opcion 3</a></li>
</ul>
</center>
<div class="tab_content" id="tab1">
CODIGO DEL REPRODUCTOR
</div>
<div class="tab_content" id="tab2">
CODIGO DEL REPRODUCTOR
</div>
<div class="tab_content" id="tab3">
CODIGO DEL REPRODUCTOR
</div>
</div>
</div>