0

I'm working on the Shopify website, using Ella theme. I have successfully embedded a product video into the theme's code, so it can be played in a pop-up modal window. Everything is fine except one problem - when the modal is closing the video continues playing in the background.

This is the modal I'm using in the product.liquid file:

<div class="modal fade halo_modal-custom" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <a data-dismiss="modal" class="close close-modal" title="{{ 'cart.ajax_cart.close' | t }}" href="javascript:void(0)">
                    {% include 'icon-close' %}
                </a>
            </div>

            <div class="modal-body">
                <div class="videoWrapper" id="my-player">
                    {%  if product.description contains '/video' %}
                    {% assign src = product.description | split:'<video' | last | split:'</video>' | first %}
                    <video id="my_video_player" {{src}}> </video>
                    {%  elsif product.description contains 'iframe' %}
                    {% assign src = product.description | split:'<iframe' | last | split:'</iframe>' | first %}
                    <iframe id="my_video_player" {{src}}> </iframe>
                    {% endif %} 
                </div>
            </div>
        </div>
    </div>
</div>

I'm not experienced in programming. Can anyone help me with the solution?

Yves Finkel
  • 1
  • You may want to look at this. https://stackoverflow.com/a/27168656/4287624 It will work for `/video` . Alternatively, you may display the modal programatically .. Share you site link. – HymnZzy Sep 04 '19 at 12:05
  • looks like a bootstrap modal. You can bind the modal to the modal hide event and stop the player https://stackoverflow.com/a/13201843/736967 – Ronnie Sep 04 '19 at 20:49

1 Answers1

0

Please add this script 

 <script>
   function closeModal() {
     $('.halo_modal-custom').hide();
     $("#my-player iframe").attr("src", $("#my-player iframe").attr("src"));
  }

  $('.close').on('click',function(){
    closeModal();
  }};
 </script>
ankit singh
  • 565
  • 3
  • 8