hola gente estoy haciendo unas tabs que tienen dos pestañas, fotos y videos(youtube iframe)
el problema esta cuando activo la pestana del video y quiero volver al de la foto, se queda el video y sigue reproduciendo.
Código:
$(document).ready(function() {
//Cuando el sitio carga...
$(".tab_content").hide(); //Esconde todo el contenido
$("ul.tabs li:first").addClass("active").show(); //Activa la primera tab
$(".tab_content:first").show(); //Muestra el contenido de la primera tab
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Elimina las clases activas
$(this).addClass("active"); //Agrega la clase activa a la tab seleccionada
$(".tab_content").hide(); //Esconde todo el contenido de la tab
var activeTab = $(this).find("a").attr("href"); //Encuentra el valor del atributo href para identificar la tab activa + el contenido
//Stop playing video:
if (activeTab != '#tab1')
$('div#' + activeTab).find('iframe').attr('src', '');
$(activeTab).fadeIn(); //Agrega efecto de transición (fade) en el contenido activo
return false;
});
});
<ul class="tabs">
<li><a href="#tab1">Fotos</a></li>
<li><a href="#tab2">Videos</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content"> <!-- foto--> </div>
<div id="tab2" class="tab_content"> <!--video iframe--> </div>
</div>
Me podran dar una mano ?
saludos