1

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>
  • I recommend that you initialize the video once with the modal, and when you close the modal to delete the video element, so I did, it works – St3phan Feb 28 '18 at 8:47
  • can u help me with coding im really new to this stuff – stewart Feb 28 '18 at 8:48
  • Check the answer – St3phan Feb 28 '18 at 9:14
0

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>
  • Please copy and paste my code into your phtml file because of you have not changed many things there. – St3phan Feb 28 '18 at 9:34
  • try to take it now from me because I removed the responsive part – St3phan Feb 28 '18 at 9:36
  • I think its not go inside this.clodemodal() if i put a console.log it not show – stewart Feb 28 '18 at 9:44
  • If i press the click me button it will popup the video if i close the video still play but when I click the click me button again it will stop and go to start of video – stewart Feb 28 '18 at 9:46
  • Did you copy all my code into your file and delete the old one? It works for me. – St3phan Feb 28 '18 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.