Modal Window with Youtube video stop video playing

Question

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
            });

Answer 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

Answer 2

Pawan, I hope you don't mind my jumping in, but I'm having a similar issue. I tried your suggested code above (and about ten others) with no luck:

<div class="lightbox" id="box-books">
 <div class="box-bg">
  <a href="#page" class="close">X</a>
  <iframe id="playerid" class="center" width="80%" height="600px" 
 src="https://www.youtube.com/embed/videoseries? 
list=PLUgadhOLCi0T6NfoVWSBOIsHbkhD_I8Vs" frameborder="0" 
webkitallowfullscreen mozallowfullscreen allowfullscreen 
allow="autoplay; encrypted-media" allowtransparency="true"></iframe>
 </div>
</div>

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

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

  });
</script>

Any thoughts? Thank you in advance!

Answer 3

This is what I am using for video modals now and it works well:

<p><a href="javascript:void(0);" id="click-vlink1">Video </a> </p>
<div id="video-modal1" style="display:none;">
<div class="videoWrapper">
<iframe  id="youtube1" width="560" height="315" src="https://www.youtube.com/embed/YOoWIWiCVZE" frameborder="0" allow="autoplay; 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-modal1'));
            $("#click-vlink1").on('click',function(){ 
                $("#video-modal1").modal("openModal");
            });
            $('.action-close').on('click', function() {
            var video = $("#youtube1").attr("src");
            $("#youtube1").attr("src","");
            $("#youtube1").attr("src",video);
            });
            $('.close-modal').on('click', function() {
            var video = $("#youtube1").attr("src");
            $("#youtube1").attr("src","");
            $("#youtube1").attr("src",video);
            });


        }
    );
</script>                 

Hope this helps someone.