React Hooks video slider, Video not playing

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([

    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 



    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

    // 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 (
       <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">
          , index) => 

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


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

export default Slider

here is the video frame:

Please help!
I appreciate your help in advance.

Thank you!

Try using an iframe instead.

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

1 Like

Thank you for the suggestion! :pray:

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

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.