Embedded youtube video keep playing after closing modal

I have a tailwind modal on my app that shows embedded iframe youtube video, when the modal is closed the video keep playing, So

How to stop playing the video at the same time when the modal is closed

<template>

    <div>

        <div v-show="showModal" @click="toggleModal" class="fixed pin z-60 overflow-auto bg-smoke-darker flex font-sans">
            
          <div class="relative w-full max-w-md m-auto flex-col flex animated fadeIn">

            <div class="flex justify-between draggable pb-1 text-white header">
                
                <div></div>

                <div @click.stop="toggleModal" class="cursor-pointer">

                    <i class="fas fa-times text-2xl text-grey-dark hover:text-grey-light"></i>

                </div>

            </div>
                              
            <div class="resp-container">

                <iframe width="560" height="315" src="https://www.youtube.com/embed/8u_3sewnp2w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

            </div>

          </div>

        </div>

    </div>

</template>

<script>

export default {

    name: 'popup-video-modal',

    props: ['widget', 'media'],

    data () {

        return {

            showModal:false,

        }

    },

    methods: {

        toggleModal : function(){

            this.showModal = !this.showModal;

        },

    }

}
</script>