1

I am having issues with Youtube video playing in Magento 2.2 store using modal popup to display video.

Here is what I am using to for modal window:

<div id="video-modal" style="display:none;">
<div class="videoWrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/u6pzhZ6V_pc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: '',
                buttons: [{
                    text: $.mage.__('Close'),
                    class: 'close-modal',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

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

        }
    );
</script>

Problem is that after modal closes the video keeps playing. I have tried to remove the iframe, but that ends up removing all iframes if there are more than one modal on a cms page. Ie:

 $(".action-close").click(function(){
         $("iframe").remove();   //For Safety
            });
1

We can achieve it by following way:

Add an id to iframe say playerid.

Use following code to stop video on click.

$('.action-close').on('click', function() {

  var video = $("#playerid").attr("src");
  $("#playerid").attr("src","");
  $("#playerid").attr("src",video);

});

Above code will keep src in a variable, remove src from iframe and again add src to iframe.

Hope above will help!

Reference

  • This worked perfectly! Thank you very much!!!! – JonW Feb 26 at 23:11
  • 1
    glad to know @JonW, You can accept and up-vote answer :) – Pawan Feb 27 at 2:19

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.