I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this: I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.

My function currently looks like this:

$(function () {
    
    $('#shadingleft').on('click', function () {
        rotateLeft();
        reset();
        selector = selector - 1;
        if (selector <= -1) {
            selector = 9;
        }
        $('.clicked').toggleClass('clicked');
    })
    
    $('#shadingright').on('click', function () {
        rotateRight();
        reset();
        selector = selector + 1;
        if (selector >= 10) {
            selector = 0;
        }
        $('.clicked').toggleClass('clicked');
    })
    
    $('#shadingtop').on('click', function () {
        rotateUp();
        $('.clicked').toggleClass('clicked');
    })
    
    $('#shadingbottom').on('click', function () {
        rotateDown();
        $('.clicked').toggleClass('clicked');
    })
    
    $('.art').on('click', function () {
        $(this).toggleClass('clicked');
    })
    
});

As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos. Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.

Thanks for helping!