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

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

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!

| improve this answer | |

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.