Tengo un control deslizante donde, si hace clic en él, aparece una inserción de YouTube en la parte superior del elemento en el que se hizo clic, pero cuando intenta desplazarse en el iframe, el control deslizante no se desplaza. Solo con elementos que no tengan iframe. ¿Alguien sabe cómo puedo solucionar este problema?

 <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; } }