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.

Answer 4

Thanks to the answers, I was able to re-purpose this for a vimeo popup.

Here's what I did for a vimeo video if anyone needs it.

<?php $_product = $block->getProduct(); ?>
<?php if ($_product->getVimeoVideoUrl()) : ?>
    <button name="vimeo" title="<?= $block->escapeHtmlAttr(__('Watch Video')) ?>" class="action vimeo-button primary">
        <span><?= $block->escapeHtml(__('Watch Video')) ?></span>
    </button>
    <div id="vimeo-block" class="vimeo-block">

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

                var popup = modal(options, $('#vimeo-block'));
                $(".vimeo-button").on('click',function(){
                    $("#vimeo-block").modal("openModal");
                });
                $('.vimeo-button').on('click', function() {
                    $( "#vimeo-block" ).append( "<iframe id=\"playerid\" src=\"https://player.vimeo.com/video/<?= $block->escapeUrl($_product->getVimeoVideoUrl()) ?>?autoplay=1\" width=\"100%\" height=\"450\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen></iframe>" );
                });
                $('.action-close, .close-modal, .modals-overlay').on('click', function() {
                    $("#vimeo-block").empty();
                });

            }
        );
    </script>
<?php endif; ?>

Basically, the modal content loads with an empty container. On open, it injects the iframe into it which means the autoplay will only start then.

On close, it empties that element so we have no naughty sound in the background.

There's probably a better way of doing it, but I had to account for the close icon, close button and modal overlay.

Thanks!