Exchange src in an Iframe

Question

Good morning friends. I’m making a page where there will be some youtube videos, and with this I will have some links that when activated should pass the respective video inside my iframe. But in the whole process, when clicking on the video link, it goes to the whole screen and not into the iframe. Here is the code:

function trocaSrc($a) {
    document.getElemtById("iframe1").src = $a.href;
    return false;
}

And the links:

<div>
<a href="https://www.youtube.com/embed/18WLEZZVaWY" onClick="return trocaSrc(this);">Video 1</a>
<a href="https://www.youtube.com/embed/0CleeB4bY7U"; onClick="return trocaSrc(this);">Video 2</a>
</div>

I can not find where I’m going wrong... I thank from now on the friends who can take their time to answer.

Answer 1

Syntax error:

document.getElemtById

The right thing would be:

document.getElementById

How the error happens before the return false;, the link is directing the page to the Youtube URL listed on href.

In the example below the video will not appear due to restrictions snippet, but note that the link is not redirected.

function trocaSrc($a) {
    document.getElementById("iframe1").src = $a.href;
    return false;
}

<div>
<a href="https://www.youtube.com/embed/18WLEZZVaWY" onClick="return trocaSrc(this);">Video 1</a>
<a href="https://www.youtube.com/embed/0CleeB4bY7U"; onClick="return trocaSrc(this);">Video 2</a>
</div>
<iframe id="iframe1"></iframe>