nhayder
227
3
Vue

Embedded youtube video keep playing after closing modal

Posted 1 month ago by nhayder

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>

Please sign in or create an account to participate in this conversation.