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

[Miroku97]

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":

Mujer Maravilla 1984

Plantilla de Pelicula

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?

 

[Frcruter]

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

 

[Henry00jj95]

Javascript bro, tendrias que adaptarlo a blogger,

tendrias que hacer la modificaciones correspondientes.

te dejo el codigo.

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);
    });
}

 

[Berker]

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:

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

 

[Miroku97]

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:

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

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! 😀

 

[Miroku97]

Javascript bro, tendrias que adaptarlo a blogger,

tendrias que hacer la modificaciones correspondientes.

te dejo el codigo.

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);
    });
}

Vale, veré si puedo aplicarlo y hacer que funcione. Gracias!

 

[Berker]

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! 😀

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

 

[Henry00jj95]

Vale, veré si puedo aplicarlo y hacer que funcione. Gracias!

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.