1

I am using React player version 1.15.3 to play videos in an React web app. I am having an issue with displaying videos from Vimeo, react player seems to shrink them to mini size. I have tried the few things I can think of as well as the responsive player recommendation here https://github.com/CookPete/react-player#responsive-player but still no luck. I need to make it fill its parent container and be responsive as well. Screenshot of issue

Code for react player

<div className='player-wrapper'>
   <ReactPlayer
     url={props.video.url}
     muted
     controls
     width='100%'
     height='100%'
     className='react-player'
    />
</div>

CSS Code for react player

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Thank you for your help

Community
  • 1
  • 1
Jerehme Gayle
  • 31
  • 5
  • Did you figure this out? I'm having the same issue! – Coherent Jul 08 '20 at 02:48
  • Yes, ended up being the wrapping element of the 'player-wrapper' that was causing it to shrink. – Jerehme Gayle Aug 01 '20 at 02:52
  • @JerehmeGayle You have wrapped the player-wrapper with some other element. Could u pls provide some info on it. bcoz still i am facing the same issue – Nidhin Kumar Mar 31 '23 at 15:58
  • In this particular case I think it was inside of a MUI Grid but I can not recall. Do you have a code snippet I can look at? I may be able to help. – Jerehme Gayle Mar 31 '23 at 17:41
  • @JerehmeGayle Here is the question link: https://stackoverflow.com/questions/75901671/react-player-for-vimeo-show-the-player-to-be-small-at-first – Nidhin Kumar Mar 31 '23 at 18:29

0 Answers0