0
153
Vistas¿Cómo puedo cambiar iframe src haciendo clic en diferentes divs?
Así que tengo cinco contenedores div diferentes y un iframe. Necesito cambiar src de iframe según el div en el que haga clic. Son enlaces de youtube, por lo que cada vez que hago clic en un div en particular, se debe cambiar iframe src. Divs, haciendo clic en el iframe que se debe cambiar:
Iframe: 
Código HTML de iframe:
<div class="full"> <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe> </div>He encontrado algún tipo de solución, pero no parece funcionar:
var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA", "https://www.youtube.com/embed/c7nRTF2SowQ", "https://www.youtube.com/embed/6LOD-pwJY6E", "https://www.youtube.com/embed/8X2kIfS6fb8", "https://www.youtube.com/embed/p5yUKjOOWvM" ]; var currentIndex = 0; var len = locations.length; $(document).ready(function(){ $(document).on('click', '.preview', function(){ currentIndex = this.attr("id") == "1" ? currentIndex < len - 1 ? ++currentIndex : 0 : currentIndex > 0 ? --currentIndex : len - 1; $('#iframe').attr('src', locations[currentIndex]); }); })Básicamente, div tiene una clase de vista previa, por lo que jquery debería activar una función cuando se hace clic en div con .preview class, y luego, dadas las ID de divs, debería cambiar el src de iframe, pero no parece funcionar.
Editar: Ok, hice una página completamente nueva y probé el método @Rana, y todavía no funcionaba en mi navegador, así que fui a la consola y aparecieron los siguientes errores: 
Entonces, no estoy seguro, ¿tal vez tenga algo que ver con cargar enlaces de YouTube desde el código JavaScript?
1 Respuestas
Responde la pregunta0
Aquí hay un ejemplo práctico de cómo cambiar src al hacer clic en los botones y cada vez que se muestra src cambiado.
- Los primeros valores
srcse proporcionan en unaarray - Ahora recorrió todas las etiquetas con la clase
.srcChangery agregó un detector de eventos que se activa alclick. - Luego se ejecuta la función que toma el valor de la
arrayde acuerdo con eli-ésimo valor de la etiqueta
var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA", "https://www.youtube.com/embed/c7nRTF2SowQ", "https://www.youtube.com/embed/6LOD-pwJY6E", "https://www.youtube.com/embed/8X2kIfS6fb8", "https://www.youtube.com/embed/p5yUKjOOWvM" ]; var btnSrc = document.getElementsByClassName("srcChanger"); for (let i = 0; i < btnSrc.length; i++) { btnSrc[i].addEventListener('click', function() { document.getElementsByClassName("responsive_frame")[0].src = locations[i]; document.getElementById("demo").innerHTML = locations[i]; }) } <div class="full"> <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe> </div> <button class="srcChanger">Btn1</button> <button class="srcChanger">Btn2</button> <button class="srcChanger">Btn3</button> <button class="srcChanger">Btn4</button> <button class="srcChanger">Btn5</button> <div id="demo"></div>