i can't play or pause a youtube video with a button using vue3do i have to use some pachades?
Here is the code:
<script >export default { data() { return { websites: [ { siteName: 'website1', }, { siteName: 'website2', url: 'https://website2.com' }, { siteName: 'website3', url: 'https://website3.com' }, { siteName: 'website4', url: 'https://website4.com' }, { siteName: 'website5', showFrame: false, } ], iconsUrl: [ { tw: 'https://twitter.com'}, { dc: 'https://discord.com'}, { email: 'https://gmail.com'} ], iconeSize: '2x', videoIcon: true } }, mounted() { // Add a click event listener to the overlay div document.querySelector('.overlay').addEventListener('click', (event) => { // Check if the clicked element is outside the ytvideo element if (!event.target.closest('.ytvideo')) { // If it is, hide the overlay by setting the showFrame property to false this.websites[4].showFrame = false; // Pause the video when hiding the overlay video.pause(); } }); // Add a click event listener to the video icon document.querySelector('.video span').addEventListener('click', () => { // Toggle the paused property of the video element if (video.paused) { video.play(); } else { video.pause(); } }); },}</script>i want to click .video span and play/pause the youtube video, but the button does not effect the video at allwhat should i do please help, and thank you in advance
