styling react video component

Follow

Matthew McGillivray

• February 10, 2021 14:00

I am looking to have my videos display a big play button, the way they do in almost all the example videos I can find:

However, mine look like this:

I am using the cloudinary-react package, and I've inlcuded the cld-video-player on the class input.

import { Video } from 'cloudinary-react'
...

<Video
   cloudName="thatwaspro"
   publicId={streamer.clipId}
   controls
   class="cld-video-player"
   videoCodec={"auto"} />

I'm not sure how to go about styling this?

 

0

• 

  Michal Kuperman

  • February 11, 2021 15:24

  Hi Matthew,

  In order to display the big play button, you can use our video player (the video element you are using is not using our video player).

  Please add this in your code: 

  var cld = window.cloudinary.Cloudinary.new({ cloud_name: "your_cloud_name"});
  
  var player = cld.videoPlayer("example-player");
  player.source("public_id");

  And this in your HTML:

    <video
          id="example-player"
          controls
          class="cld-video-player"
        ></video>

  Don't forget to include the relevant CSS and js files for the video player.

  You can refer here for more info: https://cloudinary.com/documentation/video_player_how_to_embed

   Please let us know if this solves your issue,

  Thanks,

  Michal

  0

  Comment actions Permalink

Please sign in to leave a comment.