N
Nuxt•5d ago
Sagar Kapoor

I'm struggling with pausing YouTube videos in a Nuxt carousel when navigating between slides.

<iframe 
  v-if="slide.type === 'video'"
  :src="`${slide.mediaUrl}?enablejsapi=1`"
  :title="slide.title"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>
<iframe 
  v-if="slide.type === 'video'"
  :src="`${slide.mediaUrl}?enablejsapi=1`"
  :title="slide.title"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>
And I'm trying to pause videos when navigating with this function: 
const stopVideos = () => {
  const iframes = document.querySelectorAll("iframe");
  for (const iframe of iframes) {
    iframe.contentWindow.postMessage(
      '{"event":"command","func":"pauseVideo","args":[]}',
      "https://www.youtube.com"
    );
  }
};
const stopVideos = () => {
  const iframes = document.querySelectorAll("iframe");
  for (const iframe of iframes) {
    iframe.contentWindow.postMessage(
      '{"event":"command","func":"pauseVideo","args":[]}',
      "https://www.youtube.com"
    );
  }
};
2 Replies
kapa.ai
kapa.ai•5d ago
Hi @Sagar Kapoor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the provided knowledge sources do not contain explicit information about handling YouTube iframes or pausing embedded YouTube videos in a Nuxt carousel component. The sources cover how to use the Nuxt UI Carousel component, including plugins for autoplay, auto-scroll, and other features, but they do not address integration with YouTube's player API or how to programmatically pause videos when navigating slides. If you need guidance specifically on pausing YouTube videos in a Nuxt carousel, you may need to consult the YouTube IFrame Player API documentation or seek community advice, as this scenario is not covered in the official Nuxt UI or carousel documentation provided in the sources above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5d ago
<@565461230060306432> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?