Cómo hacer que un contenido de vídeo iframe se recargue al hacer clic en otra opción de tabs?

  • Autor Autor Miroku97
  • Fecha de inicio Fecha de inicio
Miroku97

Miroku97

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de 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 edición:
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 edición:
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:


Insertar CODE, HTML o 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 dijo:
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:


Insertar CODE, HTML o 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
Hacer clic 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 dijo:
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);
    });
}
Hacer clic para expandir...
Vale, veré si puedo aplicarlo y hacer que funcione. Gracias!
 
Miroku97 dijo:
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! 😀
Hacer clic 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 dijo:
Vale, veré si puedo aplicarlo y hacer que funcione. Gracias!
Hacer clic 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.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba