React Hooks video slider, Video not playing

[godswill199]

I am trying to do a video slider in my react project using hooks and when I inspect the component I see my videos as shown in the screenshot below:

But it is not playing, and the controls are inactive.

I would love your suggestion and input on this one. Kindly tell me what I’m doing wrong

Here is my code:

import React, { useState } from 'react'

const Slider = () => {

    const [ videos, setVideos] = useState([
       'https://www.youtube.com/watch?v=PFPfxcvRshk',
       'https://www.youtube.com/watch?v=Lst9mgmOnbo',
       'https://www.youtube.com/watch?v=bnzVL0a5h5w',
    ]);

    const [currentVideoIndex, setCurrentVideoIndex] = useState(0);

    const prevSlide = () => {
    
    // check if current video  equals 0 

    const startFromBeginning = currentVideoIndex === 0;

    const index = startFromBeginning ? videos.length - 1 : currentVideoIndex - 1;

    // assign the logical index to the current video that will render 

    setCurrentVideoIndex(index)

    }

    const nextSlide = () => {
        // check if we need to start over from the first index
        const resetIndex = currentVideoIndex === videos.length - 1;
    
        const index = resetIndex ? 0 : currentVideoIndex + 1;
    
        // assign the logical index to current video index that will be used in render method
        setCurrentVideoIndex(index);
      }


    // create a new array with 1 element from the source video
    const firstVideoSlide = videos.slice( currentVideoIndex, currentVideoIndex + 1)

    // check the length of the new array
    const videoSourceToDisplay = firstVideoSlide.length < 1

    // if  the imageSourcesToDisplay's length is lower than 5 images than append missing images from the beginning of the original array

    ? [...firstVideoSlide, ...videos.slice(0, 1 - firstVideoSlide.length) ]
    : firstVideoSlide;



    return (
        <div>
            
       <button onClick={prevSlide}>prev</button>

          <div className="media-content flex justify-center ">
             <div className="media-content flex justify-center border-4 border-light-blue-500 border-opacity-25 shadow-md">
               
                    {
                    videoSourceToDisplay.map((video, index) => 

                    <video controls loop className="videocard">
                        <source src={video} key={index} type="video/mp4" />
                    </video>

                    )}
              </div>
            </div>

      <button onClick={nextSlide}>next</button>
        </div>
    )
}

export default Slider

here is the video frame:

Please help!
I appreciate your help in advance.

Thank you!

[lasjorg]

Try using an iframe instead.

There are also some React components you can look at (e.g. react-player).

[godswill199]

Thank you for the suggestion!

Do I have to install the iframe npm before using it or just the Html tag?

[lasjorg]

I’m just talking about the iframe HTML element. Like what you get when you click the share/embed button on a YT video.