I'm trying to add a vimeo video to my react project. I looked up a simple react player example but only was able to see the thumbnail of the video, it wont actually play. I've tried looking into different methods but I'm pretty lost. If someone could let me know what I'm missing or help point me in the right direction I would appreciate it.

Thanks!

Code:

import React from "react";
import ReactPlayer from "react-player"


function Home () {
  return( 
  
  <>
  <h1>Projects</h1>

    <div>
      <ReactPlayer
        url=";
      />
    </div>
    </>

)
};

export default Home;

Result:

I'm trying to add a vimeo video to my react project. I looked up a simple react player example but only was able to see the thumbnail of the video, it wont actually play. I've tried looking into different methods but I'm pretty lost. If someone could let me know what I'm missing or help point me in the right direction I would appreciate it.

Thanks!

Code:

import React from "react";
import ReactPlayer from "react-player"


function Home () {
  return( 
  
  <>
  <h1>Projects</h1>

    <div>
      <ReactPlayer
        url="https://vimeo./352786895"
      />
    </div>
    </>

)
};

export default Home;

Result:

• javascript
• reactjs
• vimeo
• react-player

1 Answer 1

You should use prop controls to show player controls.

...
<ReactPlayer
        url="https://vimeo./352786895"
        controls
      />
...