I have a slider where if you click on it, an youtube embed appears on top of the clicked item it, but when you try to scroll on the iframe, the slider doesn't scroll. Only with elements that have no iframe. Does anyone know how I can solve this issue?

<div class="podcast_wrapper">
   <div @click="(visible = !visible), (id = index)">
      <PodcastsItem
         :imageUrl="podcast.image"
         :title="podcast.name"
         :text="
         'Duur: ' +
         Math.round(podcast.duration / 1000 / 60) +
         ' minuten'
         "
         :class="visible && id === index ? 'hide' : ''"
         />
   </div>
   <div class="embed_wrapper" v-if="visible && id === index">
      <iframe
         style="border-radius:12px"
         :src="
         'https://open.spotify.com/embed/episode/' +
         podcast.id +
         '?utm_source=generator'
         "
         frameBorder="0"
         allowfullscreen=""
         allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
         ></iframe>
   </div>
</div>

.hide {
    position: relative;
    transition: 0.5s;
    opacity: 0;
    transform: rotateX(0.5turn);
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px;
    @media #{$large-up} {
        height: 250px;
    }
}