0

Need to have custom play button like below, and also need to add video title in any position over the video

enter image description here

Need to have custom play button like below, and also need to add video title in any position over the video. Currently trying react-player. Any help will be appreciated

import ReactPlayer from 'react-player'

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

How to pass custom play button like above image?

Current image

When ever I pass youtube link, youtube's default overlay is comming, I need customize to it.

Arun Kumar
  • 355
  • 3
  • 10
  • I would recommend reviewing [ask] and then reviewing this question. You've missed a few key items-- for instance, you have included no code and you have no question in this post. Without a question, it is difficult to provide an "answer". Good luck, and happy coding! – Alexander Nied Sep 10 '21 at 13:37
  • I appreciate your suggestions, updated the post – Arun Kumar Sep 10 '21 at 13:44

2 Answers2

2

YouTube does not allow for customizing the play button. To achieve this:

  1. Get and place the YouTube video using your existing code
  2. Hide the YouTube video
  3. Create a div that is positioned at the same place as the YouTube video
  4. Use a custom image or get the thumbnail image of the YouTube video and use it as the background-image of a div
  5. Position your custom play-button and custom text in the div
  6. When the button is clicked, hide your div, show the YouTube video with autoplay enabled
veesar
  • 422
  • 3
  • 11
0

From the react-player documentation for "light player mode":

The light prop will render a video thumbnail with simple play icon, and only load the full player once a user has interacted with the image. Noembed is used to fetch thumbnails for a video URL. Note that automatic thumbnail fetching for Facebook, Wistia, Mixcloud and file URLs are not supported, and ongoing support for other URLs is not guaranteed.

If you want to pass in your own thumbnail to use, set light to the image URL rather than true.

The styles for the preview image and play icon can be overridden by targeting the CSS classes react-player__preview, react-player__shadow and react-player__play-icon.

(emphasis added)

SO-- it appears that to provide a custom preview image you would rewrite your JSX as:

<ReactPlayer
    url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
    light="path/to/your/preview/image"
/>

So you can accomplish this with a custom preview image. If you need something more dynamic, in which the button has its own hover states, you may need to spin something from scratch or find a different library.

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45