0

Quiero que cuando se haga click en el frameDos ese se pase al frameMain Lo pienso hacer que cuando se haga un click en el framDos este intermcambie las etiquetas del src pero no me sale :c

Lo pienso hacer que cuando se haga un click en el framDos este intermcambie las etiquetas del src pero no me sale :c Porfavor y gracias de antemano

    const frameMain = document.querySelector('.frameMain');
    const frameDos = document.querySelector('.frameDos');

    //intermcabio el src del iframe de la izquierda con el de la derecha al darle click al iframe de la derecha
    frameDos.addEventListener('click', () => {
        const srcMain = frameMain.querySelector('iframe').src;
        const srcDos = frameDos.querySelector('iframe').src;
        frameMain.querySelector('iframe').src
        = srcDos;
        frameDos.querySelector('iframe').src
        = srcMain;
    }); 

'''

</head>
<style>
section{
    padding: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
</style>

<body>
<section>
 <div class="frameMain"><iframe width="610" height="315" 
 src="https://www.youtube.com/embed/uiiss0hP8xM?start=246" title="YouTube video player" 
 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="frameDos"><iframe width="410" height="250" 
 src="https://www.youtube.com/embed/TqTEJ-Jd6Ug" title="YouTube video player" 
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
 gyroscope; picture-in-picture" allowfullscreen></iframe></div>
   </section>


  </body>
 </html>

1 respuesta 1

1

Al hacer clic, estás haciéndolo sobre el iframe (ya ves que el vídeo se inicia cuando ocurre), no sobre la capa frameDos. El prolema está en que los iframe no están pensandos para usar el evento onclick.

Una opción es superponer una capa transparente a modo de botón sobre el iframe de frameDos para que, al hacer clic sobre ella, se cargue el vídeo en el iframe de frameMain.

Así se haría con un button, que requiere algunas líneas más de CSS que una capa o un enlace, pero tiene mayor sentido a nivel de código:

const frameMain     = document.querySelector('.frameMain').querySelector('iframe');
const frameDos      = document.querySelector('.frameDos').querySelector('iframe');
const frameDosBoton = document.querySelector('.frameDos').querySelector('button');

frameDosBoton.addEventListener('click', () => {
  const srcMain = frameMain.src;
  const srcDos  = frameDos.src;
  
  // El '?autoplay=1' es opcional (hace que se autoreproduzca el iframe principal)
  frameMain.src = srcDos + '?autoplay=1';
  frameDos.src  = srcMain;
});
section {
    padding: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.frameDos {
  position: relative;
}

.frameDos iframe {
  z-index: 1; /* Opcional: Si el iframe se incluye antes del button en el código HTML, no hace falta z-index */
  position: relative;
}

.frameDos button {
  z-index: 2; /* Opcional: Si el iframe se incluye antes del button en el código HTML, no hace falta z-index */
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Propiedades específicas para button, cambiarían para un div, un enlace, etc. */
  color: transparent;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;  
  background-image: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
<section>
  <div class="frameMain">
    <iframe width="610" height="315" src="https://www.youtube.com/embed/uiiss0hP8xM?start=246" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="frameDos">
    <iframe width="410" height="250" src="https://www.youtube.com/embed/TqTEJ-Jd6Ug" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <button title="Reproducir vídeo en la ventana principal">Reproducir vídeo en la ventana principal</button>
  </div>
</section>

1
  • 1
    hermano, muchisimas gracias, realmente entendiste mi duda. gracias hermano me sirvio a la perfecion
    – El Chido
    Commented el 1 dic. 2022 a las 16:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.