0

I have searched for the answer and tried to implement the solutions, and they were not working for me. Everything works fine except the video sound continues to play after closing or clicking off the modal. How do I stop the sound from continuing playing?

<div class="custom-video">
    <div class="col-md-4 col-xs-6">
        <a href="#" data-modal-id="header-modal-1" class="click-header">
            <div>Title</div>
            <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg">
        </a>
    </div>
</div>

<div id="header-modal-1" class="videoWrapper" style="display:none;">
    <iframe id="playerid" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

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

            $(".click-header").on('click',function() {
                var dynamicTitle = $(this).html();
                options.title = dynamicTitle;
                var modalId = $(this).attr('data-modal-id');
                var popup = modal(options, $('#'+modalId));
                $('#'+modalId).modal("openModal");
            });
        }
    );
</script>

Your Answer

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

Browse other questions tagged or ask your own question.