I have one main iframe (vidframe) on a webpage. On that same page I have several links on different parts of the page to other vimeo videos that when clicked on, show in the main iframe. However, I cannot figure out how to get the page to scroll to that main iframe when more than one of the links is clicked on.
The main iframe is:
<iframe id='vidframe' name='vidframe' src="https://player.vimeo.com/video/123456"></iframe><script src="https://player.vimeo.com/api/player.js"></script>
The links are like:
<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>
The video switches out just fine, but it only moves on the page to the iframe with the first click on the page. Any links clicked after the first click the video swaps, but the page doesn't move to the iframe. Any and all help is appreciated.
Details are commented in example below
/*
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>