Video keeps playing in background after closing popup

Question

I have a button that when clicked, pops up a video content that can be played. The problem is that if I close the popup while the video is playing, it does not stop and keeps playing in the background.

This is the code I'm using for the button and video

<div>
    <a id="click-me">Click Me</a>
</div>

<div id="popup-mpdal" style="display:none;">
    <div class="">
        <video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
            <source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
        </video>
    </div>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){ 
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>

EDIT

I have edited the code like below, but still getting the same error

<div>
    <a id="click-me">Click Me</a>
</div>

<div id="popup-mpdal" style="display:none;">
    <div class="">
        <video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
            <source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
        </video>
    </div>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: 'X',
                    class: 'action-close',
                    attr: 'data-role="closeBtn"',
                    click: function () {
                        $('#videoplayer').remove();
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){ 
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>

Answer 1

In the example below, I'm initiating the video at the same time as the modal, and to stop the video I've removed the video element.

What you have to do from the CSS is the close button stylisation, I've removed the existing close item from CSS, and the close button (X) from the modal to move it to the top right.

<div>
    <a href="javascript:void(0)"
       id="click-me"
       data-video="<?php echo /* @escapeNotVerified */ $block->getUrl('pub/media/video/')?>this-is-chris-saint-long-version.mp4"
       data-image="<?php echo /* @escapeNotVerified */ $block->getUrl('pub/media/video/')?>whats-your-story.png"
    >
        Click Me
    </a>
</div>

<div id="popup-mpdal" style="display:none;"></div>

<script>
    require(['jquery', 'Magento_Ui/js/modal/modal'],
        function ($, modal) {
            var options = {
                    type: 'popup',
                    modalClass: 'popup-mpdal-video',
                    responsive: true,
                    innerScroll: true,
                    title: false,
                    buttons: [{
                        text: 'X',
                        class: 'action-close',
                        attr: 'data-role="closeBtn"',
                        click: function () {
                            $('#videoplayer').remove();
                            this.closeModal();
                        }
                    }]
                };

            $('#click-me').click(function () {
                var el = $(this),
                    videoModal = $('#popup-mpdal'),
                    videoSrc = el.data('video'),
                    imageSrc = el.data('image'),
                    video = '<video id="videoplayer" controls poster="' + imageSrc + '"> <source src="' + videoSrc + '" type="video/mp4"> </video>';
                videoModal.html(video);
                var popup = modal(options, videoModal);
                videoModal.modal('openModal');
            });
        }
    );
</script>