Ella theme/Video Product: The video continues playing after the modal (video player) is closed

Tourist
6 0 1

I'm working on my Shopify store using Ella theme. I have successfully embedded a product video into the product page so it can be played in a pop-up modal window when someone clicks the video button to play.

Everything is fine and the video is working, except one problem - when the modal is closing the video continues playing in the background.

I'm using Google Drive embedded video:

<video width="640" height="480" controls="controls">
<source src="https://drive.google.com/uc?export=download&amp;id=1a9vqvdZoTMemeareNRTILqoYobZQStHM" />
</video>

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

<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&colon;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?

0 Likes
New Member
4 0 0

Have you figured it out?

0 Likes