Change height and width of a React Player thumbnail using light prop

Question

I set the thumbnail of the React Player using the light prop. Example code is as follows.

 <ReactPlayer                                              
       url= 'https://samplevideo.com'
       light = 'https://sampleimage.com'
       playing
       controls/>

This works as expected. But the thumbnail image does not always fit the react player. Sometimes only a part of the actual image is shown as the thumbnail. Is there a way to change the height and width of the thumbnail image of the react player?

Can you please add an example of the partial result? Do you mean, that the image is fully loaded, but it doesn't cover the player or do you mean, that the image has full size but parts of the images are missing (e.g. the lower half of the image)? — Fatorice, Jun 04 '23 at 11:46

score 0 · Answer 1 · answered Jun 07 '23 at 07:22

0

Try to pass the width and height in the img in the light prop:

<ReactPlayer 
   url='https://samplevideo.com'
   light={
       <img src='https://example.com/thumbnail.png' width="100%" height="100%" />
   } 
   playing
   controls
/>

answered Jun 07 '23 at 07:22

dom1

425
1
2
19

score 0 · Answer 2 · answered Jun 09 '23 at 08:14

You can wrap your video player with a div with relative position and padding-top as given below and give the absolute position to the video player and give 100% width and height to the video player component.

The thumbnail will cover the video in both width and height.

<div style={{position: 'relative', paddingTop: '56.25%'}}>
      <ReactPlayer
        url={yourVideoUrl}
        playing
        controls
        width="100%"
        height="100%"
        style={{position: 'absolute', top: 0, left: 0}}
        className="react-player"
        light={"https://picsum.photos/seed/picsum/1200/800.jpg"}
      />
    </div>

score -1 · Answer 3 · answered Jun 08 '23 at 12:00

Yes, you can change the height and width of the thumbnail image of the React Player by passing the width and height properties to the light prop. For example:

<ReactPlayer
  url="https://samplevideo.com"
  light={
    <img src="https://sampleimage.com" width="100px" height="100px" />
  }
  playing
  controls
/>

This will resize the thumbnail image to be 100px wide and 100px high.

You can also use the object syntax to pass the width and height properties to the light prop. For example:

<ReactPlayer
  url="https://samplevideo.com"
  light={{
    src: "https://sampleimage.com",
    width: 100,
    height: 100,
  }}
  playing
  controls
/>

This will also resize the thumbnail image to be 100px wide and 100px high.

Note that the width and height properties are optional. If you do not specify them, the thumbnail image will be displayed at its original size.

score -1 · Answer 4 · answered Jun 09 '23 at 15:07

If you want to add a custom thumbnail to a ReactPlayer component, the simplest and cleanest way to do it is by passing an element to the 'light' prop and styling it accordingly. For example:

 <ReactPlayer
      url="https://www.youtube.com/watch"
      light={
        <img
          alt="null"
          src={image}
          style={{
            backgroundSize: "cover",
            backgroundPosition: "center",
            width: "100%",
            height: "100%",
          }}
        ></img>
      }

The 'light' prop accepts an element, which can be styled using CSS to achieve the desired look and feel.

Note that any changes to the image may affect the image quality, so be sure to use a high-quality image to begin with. You can also resize the image for other reasons, but keep in mind that the aspect ratio of the image should match that of the video player for best results.

Overall, using the 'light' prop with an element is a straightforward and effective way to customize the thumbnail for a ReactPlayer component.

Change height and width of a React Player thumbnail using light prop

4 Answers4