0

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>
    )
}
Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
Trif Ionut
  • 49
  • 7
  • When the video doesn't load, are you getting any errors? If so can you edit your question and add them? – treckstar May 07 '22 at 12:01
  • No, there are no errors, and the video is shown, with play button and everything, it just doesn't load. – Trif Ionut May 07 '22 at 12:11
  • Oh ok, well I am going to guess that you are using YouTube since you have it linked in the code. Pretty much, YouTube doesn't expose it's video file content, and tags require a .mp4 in the very least. So you will have to either use their embed or you could try using the MediaElement API. See here: https://stackoverflow.com/questions/19836015/youtube-url-in-video-tag – treckstar May 07 '22 at 12:29
  • Or I could use another video source, like imdb? Or it will be the same? – Trif Ionut May 07 '22 at 12:46
  • So I'm not sure what imdb has to offer for videos, but as long as the video source you are using outputs in a .webm, .ogv, or .mp4, you can use . – treckstar May 07 '22 at 17:48

0 Answers0