Como fazer com que um conteúdo de vídeo iframe recarregue ao clicar em outra opção de tabs?

  • Autor Autor Miroku97
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Miroku97

Miroku97

Gamma
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
No sé si es posible hacer algo así en blogger, como las páginas de películas que al hacer clic en una opción que contiene un vídeo iframe, el contenido de la anterior opción o tab, deje de cargar, al hacer clic en otra; y lo mismo para el resto de tabs u opciones.

Alguien sabe algún código que permita esa función?
Por ejemplo en esta plantilla compartida en el foro, tiene lo que vendría ser "Opciones":
peengler-movieonlinepremium.blogspot.com

Mujer Maravilla 1984

Plantilla de Pelicula
peengler-movieonlinepremium.blogspot.com peengler-movieonlinepremium.blogspot.com

Sin embargo, al hacer clic en otra opción, el contenido anterior sigue cargado. Entonces eso es lo que quisiera saber, si existe una manera de que esto no suceda.
¿Tal vez con javascript?
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Supongo que puedes hacerlo creando una variable que contenga el iframe actualmente seleccionado.

Al apretar otro botón de opcion, lo que hará es hacerle .click() al elemento del iframe con javascript, y cambiar la variable por el ahora actual iframe.

edit: abajo ya te pusieron el codigo, no hace falta q yo lo haga xd
 
Última edição:
Javascript bro, tendrias que adaptarlo a blogger,

tendrias que hacer la modificaciones correspondientes.

te dejo el codigo.

JavaScript: 
var tabs = document.querySelectorAll(".tab-links li a");
var content = document.querySelector(".tab-content");
var iframe = document.createElement("iframe");
//
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('marginheight', '0');
iframe.setAttribute('marginwidth', '0');
iframe.setAttribute('topmargin', '0');
iframe.setAttribute('leftmargin', '0');
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '450');
//
for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", function() {
        content.innerHTML = "";
        iframe.src = this.getAttribute("data-src");
        content.appendChild(iframe);
    });
}
 
Con jquery te quedaría mejor, pero en realidad vos lo que harías sería crear un <div> donde al presionar un botón te cargaría el contenido secuencialmente en demanda... te paso un ej:


Inserir CODE, HTML ou PHP: 
HTML:

<a href="JDglMK9sgIQ" class="video">#1</a>
<a href="LpKyzSxVhk4" class="video">#2</a>

<div class="video-wrapper">
    <iframe id="youtube" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>

JQUERY

$('a.video').click(function () {
    var id = $(this).attr('href');
    var src = '//www.youtube.com/embed/'+id;
    $("#youtube").attr('src', src);
    return false;
});

Acá tenes un ejemplo http://jsfiddle.net/tdLnoxmo/, es mejor muchas veces buscar en internet porque ya las soluciones están con sus respectivos ejemplos, este ejemplo está en https://stackoverflow.com/questions...iframe-using-jquery-onclick-function/26258177. Te recomendaría que lo adecues a tu diseño modificando los class
 
Berker disse:
Con jquery te quedaría mejor, pero en realidad vos lo que harías sería crear un <div> donde al presionar un botón te cargaría el contenido secuencialmente en demanda... te paso un ej:


Inserir CODE, HTML ou PHP: 
HTML:

<a href="JDglMK9sgIQ" class="video">#1</a>
<a href="LpKyzSxVhk4" class="video">#2</a>

<div class="video-wrapper">
    <iframe id="youtube" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>

JQUERY

$('a.video').click(function () {
    var id = $(this).attr('href');
    var src = '//www.youtube.com/embed/'+id;
    $("#youtube").attr('src', src);
    return false;
});

Acá tenes un ejemplo http://jsfiddle.net/tdLnoxmo/, es mejor muchas veces buscar en internet porque ya las soluciones están con sus respectivos ejemplos, este ejemplo está en https://stackoverflow.com/questions...iframe-using-jquery-onclick-function/26258177. Te recomendaría que lo adecues a tu diseño modificando los class
Clique para expandir...
Si! eso es lo que deseo, pero Jquery suelen decir que es pesado o algo así. Por eso incluso con las tabs no lo he querido usar...aunque sin duda sería algo más fácil de aplicar; tal vez me incline por ese lado. Gracias por esa recomendación y publicaciones! 😀
 
Henry00jj95 disse:
Javascript bro, tendrias que adaptarlo a blogger,

tendrias que hacer la modificaciones correspondientes.

te dejo el codigo.

JavaScript: 
var tabs = document.querySelectorAll(".tab-links li a");
var content = document.querySelector(".tab-content");
var iframe = document.createElement("iframe");
//
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('marginheight', '0');
iframe.setAttribute('marginwidth', '0');
iframe.setAttribute('topmargin', '0');
iframe.setAttribute('leftmargin', '0');
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '450');
//
for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", function() {
        content.innerHTML = "";
        iframe.src = this.getAttribute("data-src");
        content.appendChild(iframe);
    });
}
Clique para expandir...
Vale, veré si puedo aplicarlo y hacer que funcione. Gracias!
 
Miroku97 disse:
Si! eso es lo que deseo, pero Jquery suelen decir que es pesado o algo así. Por eso incluso con las tabs no lo he querido usar...aunque sin duda sería algo más fácil de aplicar; tal vez me incline por ese lado. Gracias por esa recomendación y publicaciones! 😀
Clique para expandir...
En realidad no es tan pesado como parece y si haces que cargue la parte del script como un js externo podes aplicar el async o defer según te sea necesario... en definitiva te resulta mejor usar el script que cargar el embed directo ya que jode la carga inicial en general y también lo estoy usando, mi carga promedio es bastante inferior incluso
 
Miroku97 disse:
Vale, veré si puedo aplicarlo y hacer que funcione. Gracias!
Clique para expandir...
solo tienes que hacer dos pequeños cambios, ya lo probe en tu misma web y funcionan perfectamente, seria un script muy sencillo y practico sin necesidad de jquery, espero puedas implementarlo. Saludos.
 
Você precisa estar logado ou cadastrado para responder aqui.
Voltar
Topo