I'm an industrial designer (designer and illustrator) for training and I'm not a programmer, but I really enjoy learning about technology and programming. I built jQuery tutorials on the internet a playlist of videos, the basic idea would be to click on one of the items below and change the video above, changing the IFRAME SOURCE of the video. It is working, the exchange happens when clicking, but the video is opening on another page, instead of switching over the same video and on the same page. What's wrong? Right now, grateful for your help and a strong hug.
$(document).ready(function() {
$("#listagem li a").click(function(e) {
e.preventDefault();
$(".video iframe").attr("src", $(this).attr("href"));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--PLAYERdevídeo--><divclass="video">
<iframe width="" height="" src="https://www.youtube.com/embed/qdIdPBIF6MU"frameborder="0" allow="encrypted-media" allowfullscreen=""></iframe>
</div>
<!-- LINKS -->
<ul id="listagem"><li><a href="https://www.youtube.com/watch?v=qdIdPBIF6MU&feature=youtu.be" id="aula1">Aula 1 <br/> <h3>Título da aula 1</h3></a></li><li><a href="https://www.youtube.com/watch?v=rfh0cpyv6hc" id="aula2">Aula 2 <br/> <h3>Título da aula 2</h3></a></li><li><a href="https://www.youtube.com/watch?v=9hFhYjmPfAk" id="aula3">Aula 3 <br/> <h3>Título da aula 3</h3></a></li><li><a href="https://www.youtube.com/watch?v=9hFhYjmPfAk" id="aula4">Aula 4 <br/> <h3>Título da aula 4</h3></a></li></ul>