Si quieres mostrar un mismo video pero con distintios servidores, esa cajita llamada Idtabs te puede ayudar un monton, y es facil de agregar, para hacerlo haz lo siquientes:
1. Pega los siguientes scripts antes de la etiqueta
</head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<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>
2. Pega los siguientes estilos antes de la etiqueta
]]></b:skin> :
/* CSS Tabs jQuery */
.contenedor_tab{color: white;float: left;clear: both;display: block;border-radius: 7px;width: 100%;}
ul.tabs{float:left;margin:0;padding:0;list-style:none;height:32px;width:600px;margin-top:-10px;}
ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;margin-bottom:-1px;background:#f8f8f8;overflow:hidden;position:relative;border-radius: 7px;margin-right:5px;}
ul.tabs li a{font-family: Arial;text-decoration:none;color:#000;display:block;font-size:13px;padding:0 20px;outline:none;border-radius: 7px;}
ul.tabs li a:hover{background:#666;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {color:#fff;background:#222;}
.contenido_tab{background-color: #222;padding: 10px;font-size: 1.2em;border-radius: 5px;}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}
3. Las siguientes lineas mostraran la caja con los videos, modificaremos lo remarcado en rojo:
<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>
<br/>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
CODIGO REPRODUCTOR
</div>
<div id="tab2" class="contenido_tab">
CODIGO REPRODUCTOR
</div>
<div id="tab3" class="contenido_tab">
CODIGO REPRODUCTOR
</div>
</div>
<div style="clear:both;">
</div>
Con esto, tendremos nuestra cajita de videos para nuestro blog, y mostrar distintas opciones de servidor al usuario.
