0

I have a bootstrap modal on a shopify page with a vimeo video embedded, I was initially having an issue where I closed the modal but could still hear the video playing. I was finally able to stop that with the code below.

But now when I reopen the modal for a 2nd time it is empty. Any suggestions?

<script>      
( function($) {
function iframeModalOpen(){

        $('.modalButton').on('click', function(e) {
            var src = $(this).attr('data-src');
            var width = $(this).attr('data-width') || 640;
            var height = $(this).attr('data-height') || 360;

            var allowfullscreen = $(this).attr('data-video-fullscreen');

            $("#modalYT iframe").attr({
                'src': src,
                'height': height,
                'width': width,
                'allowfullscreen':''
            });
        });


        $('#modalYT').on('hidden.bs.modal', function(){
            $(this).find('iframe').html("");
            $(this).find('iframe').attr("src", "");
        });
    }

$(document).ready(function(){
        iframeModalOpen();
});

} ) ( jQuery );

</script>
vermit25
  • 13
  • 5
  • 1
    Remove `$(this).find('iframe').html("");`, setting the `source` to empty `$(this).find('iframe').attr("src", "");` should stop the video – StudioTime Aug 23 '19 at 17:53
  • Yes you are correct although I am still having the same issue as before - when I reopen the modal for a 2nd time it is empty. – vermit25 Aug 23 '19 at 18:24

1 Answers1

0

I was able to solve the issue with the help of this post here: Twitter Bootstrap Modal stop Youtube video

The new code is:

<script>       
// Stop Video
( function($) {
function iframeModalOpen(){

        $("#modalYT").on('hidden.bs.modal', function (e) {
            $("#modalYT iframe").attr("src", $("#modalYT iframe").attr("src"));
        });
    }

$(document).ready(function(){
        iframeModalOpen();
});

} ) ( jQuery );

vermit25
  • 13
  • 5