Hi everyone,

I have created a video slider embedding Youtube videos (using tag <iframe>), that is, I have two videos that switch between one and the other when I click on a circle that I have taken from fontawesome.com. When I clic on the bottom PLAY to start the video, it does not stop when I switch to the next video of the slider. I would like when I change the video, the previous one is stopped.

I show below the js code that I have written so far. If you can help me to know what I should include in this code for the stop of the video that I switch it.

1. $(document).ready(function(){
2. var videoItems = $('.slidervideo li').length;
3. // Pagination --
4. for(i= 1; i <= videoItems; i++){ 
5. $('.pagination-slider').append('<li><span class="fa fa-circle"></span> 
6. </li>');
7. }
8. //------------------------
9. $('.slidervideo li').hide(); // Ocultanos todos los slides
10. $('.slidervideo li:first').show(); // Mostramos el primer slide
11. $('.pagination-slider li:first').css({'color': '#CD6E2E'});
12. //Ejecutamos todas las funciones
13. $('.pagination-slider li').click(paginationslider);
14. 
    
15. // FUNCIONES =========================================================
16. function paginationslider(){
17. var paginationsliderPos = $(this).index() + 1;
18. $('.slidervideo li').hide();
19. $('.slidervideo li:nth-child('+ paginationsliderPos +')').fadeIn(); 
20. $('.pagination-slider li').css({'color': '#858585'});
21. $(this).css({'color': '#CD6E2E'});  
22. }
23. });