0
I am an industrial designer (designer and illustrator) by training and I am not a programmer, but I like to learn about technology and programming. I built, with the help of 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 SOURCE of the video’s IFRAME. It’s working, the switch happens when you click, but the video is opening on another page, instead of changing on top of the video itself and on the same page. What’s wrong? Thanks 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>
<!-- PLAYER de vídeo -->
<div class="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>
these links should not be embed?
– Lucas Miranda
What do you mean? I don’t understand.
– Alexandre Soares da Silva
maybe I’m confusing it, but when you copy a yt link to put on your website it shouldn’t be :https://www.youtube.com/EMBED/iddoyoutube
– Lucas Miranda
type, your first iframe is in this pattern, but the links are not
– Lucas Miranda
He uploads the videos only on another page. I used the EMBED embedding pattern, as you described and also did not work, continue opening on the other page.
– Alexandre Soares da Silva
I just tested doing exactly that where I said on your links and it worked, I’m using Chrome version 69
– Lucas Miranda
thus : <a href="https://www.youtube.com/embed/rfh0cpyv6hc" id="aula2">Aula 2 <br/> <H3>Title of class 2</H3></a></li><li>
– Lucas Miranda
Thanks! Thank you, Lucas! I’ll test.
– Alexandre Soares da Silva
if it works out nicely signals me to leave as an answer
– Lucas Miranda
Lucas, I found out what was wrong! Missing attributes: NAME on target and TARGET on class links. I touched this and it’s working! Thanks, man, thanks for your help!
– Alexandre Soares da Silva