0
294
ViewsCustom overlay button and title on youtube video embedding into react
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?
When ever I pass youtube link, youtube's default overlay is comming, I need customize to it.
2 answers
Answer question0
YouTube does not allow for customizing the play button. To achieve this:
- Get and place the YouTube video using your existing code
- Hide the YouTube video
- Create a
divthat is positioned at the same place as the YouTube video - Use a custom image or get the thumbnail image of the YouTube video and use it as the
background-imageof a div - Position your custom play-button and custom text in the div
- When the button is clicked, hide your div, show the YouTube video with autoplay enabled
0
From the react-player documentation for "light player mode":
The
lightprop 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
lightto 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__shadowandreact-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.