React video won't load

Question

I'm trying to make a carousel with movies in React, and when I hover on a movie I want the trailer to start, and show some details. Everything works fine, but the video won't load.

Is there something I'm missing?

export default function Card({ index }) {
    const [isHovered, setIsHovered] = useState(false);
    const trailer = "https://www.youtube.com/watch?v=m01YktiEZCw";

    return (
        <div className='card'
            style={{ left: isHovered && index * 225 - 50 + index * 2.5 }}
            onMouseEnter={() => { setIsHovered(true) }}
            onMouseLeave={() => { setIsHovered(false) }}>
            <img src="https://ih1.redbubble.net/image.385613112.4548/fposter,small,wall_texture,product,750x1000.u4.jpg"
                alt="" />
            {isHovered && (
                <>
                    <video
                        controls
                        muted
                        AutoPlay
                        loop
                    >
                        <source src={trailer} type="video/mp4"></source>
                    </video>
                    <div className="cardInfo">
                        <span>1hour 52 mins</span>
                        <span>4.5⭐</span>
                        <span>1954</span>
                    </div>
                    <div className="desc">
                        A wheelchair-bound photographer spies on his neighbors from his Greenwich Village courtyard apartment window,
                        and becomes convinced one of them has committed murder, despite the skepticism of his fashion-model girlfriend.
                    </div>
                    <div className="genre">
                        Thriller
                    </div>
                </>
            )}
        </div>
    )
}