Tengo un iframe principal (vidframe) en una página web. En esa misma página tengo varios enlaces en diferentes partes de la página a otros videos de vimeo que cuando se hace clic en ellos, se muestran en el iframe principal. Sin embargo, no puedo entender cómo hacer que la página se desplace a ese iframe principal cuando se hace clic en más de uno de los enlaces.
El iframe principal es:
<iframe id='vidframe' name='vidframe' src="https://player.vimeo.com/video/123456"></iframe><script src="https://player.vimeo.com/api/player.js"></script>Los enlaces son como:
<a href="javascript:void(0)" onclick="IFrameScroll('https://player.vimeo.com/video/123457')"> Watch Video</a> <script type="text/javascript"> function IFrameScroll(link){ window.vidframe.location=link; window.location.hash='vidframe' } </script>El video cambia bien, pero solo se mueve en la página al iframe con el primer clic en la página. Todos los enlaces en los que se hizo clic después del primer clic en el video se intercambian, pero la página no se mueve al iframe. Cualquier y toda ayuda es apreciada.
Los detalles se comentan en el ejemplo a continuación.
/* The purpose of the JavaScript is to trigger an additional click to the next <a> when the user manually clicks the <a> before it */ /* Bind the click event to the first and third <a> */ Array.from(document.links).forEach((a, i) => { if (i === 0 || i === 2) { a.onclick = switchVideo; } }); /* Find the next tag from the clicked <a> and auto-click it. */ function switchVideo(e) { this.nextElementSibling.click(); } * { margin: 0; padding: 0; border: 0; } /* Set this specific ruleset so that the auto scrolling is smooth */ html { scroll-behavior: smooth; overflow-y: scroll; } main { height: 700px; } section { display: flex; } a, iframe { margin: 0 auto; text-align: center; } a { font-size: 40px; text-decoration: none } <main> <section> <hr id='vid1'><!-- target #id set on a tag above video so scrolling stops exactly where the video is in full view--> <a href='#vid2'>I</a><!--#1 This <a> href targets the id of "vid2". When clicked, it will scroll to that #id--> <a href="https://player.vimeo.com/video/34678075" target='frame2'> </a> <!--#2 This is a hidden <a> It targets an <iframe> with the name of 'frame2'. When clicked, it will change the src value of 'frame2' to it's href value --> <iframe name='frame1' src="https://player.vimeo.com/video/123456"></iframe> </section> <main></main> <section> <a href='#vid1'>II</a><!-- See #1 --> <a href='https://player.vimeo.com/video/286898202' target='frame1'> </a> <!-- See #2 --> <iframe name='frame2' src="https://player.vimeo.com/video/123456"></iframe> <hr id='vid2'><!-- target #id set on a tag below video so scrolling stops exactly where the video is in full view--> </section> </main> <script src="https://player.vimeo.com/api/player.js"></script>