Search code examples
javascriptjqueryplyr

Stop video when modal is close - Plyr plugin


I created multiple video player in multiple modals with Plyr plugin. One video by modal.

https://github.com/sampotts/plyr

I'm trying to stop current video when the current modal is closed.

Can I have some help please ?

Plyr.setup('.popin__video-container');

    $('.btn-open').each(function(i, el) {
        var modal = $('#' + $(el).attr('data-modal'));
        var overlay = $('.popin__overlay');
        var close = $('.btn-action');

        function removeModal() {
            modal.removeClass('statut-show');
            overlay.removeClass('statut-show');
        }

        function removeModalHandler() {
            removeModal();
        }

        $(el).click(function(e) {
            e.preventDefault();
            modal.addClass('statut-show');
            overlay.addClass('statut-show');
        });

        close.click(function(e) {
            if($(e.target).hasClass('btn-action')) {
                e.preventDefault();
                removeModalHandler();

                var playerPopin = modal.find('.plyr');

                if (!playerPopin.paused) {
                    playerPopin.pause();
                }
            }
        });

    });

Solution

  • Try assigning the initialized method for the player to a variable, then calling the pause method like so.

    let player = Plyr.setup('.popin__video-container');

    player.pause();

    This is what the documentation says.