Not able to swipe over iframe with react-swiper

Question

I am using the react-swiper library to render some youtube videos in a multi carousel format they look something like this:

Each one of these videos are rendered through a component the problem i am facing is that I am not able to swipe on these youtube card here is the code of the component which conatins the iframe:

import PropTypes from "prop-types";

import styles from "./YoutubeCardSlide.module.scss";
function YoutubeCardSlide(props) {
    return (
        <div className={styles.youtubeCardContainer}>
            <div className={styles.card}>
                <iframe
                    src={`https://www.youtube.com/embed/${props.data}`}
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                ></iframe>
            </div>
        </div>
    );
}

YoutubeCardSlide.propTypes = {
    data: PropTypes.string,
};

export default YoutubeCardSlide;

and this is the scss:

@import "styles/variables";
@import "styles/mixins";

.youtubeCardContainer {
    width: 100%;
    height: 100%;
    position: relative;
    @include max-query($md) {
        width: 100%;
    }

    .card {
        border: 1px solid #d8dfe8;
        border-radius: 10px;
        height: 100%;
        width: 100%;

        iframe {
            position: relative;
            z-index: 0;
            border: none;
            border-radius: 10px;
            height: 100%;
            width: 100%;
            outline: none;
        }
    }
}

If I add the pointer-events: none to the iframe it allows the swipe to work but now i am not able to play the video

can someone suggest how can i achieve both of this functionality which are to be able to swipe and play the video