1

I'm currently using VideoPlayer from react-video-js-player and I'm trying to override the default height/width styles to have the video inherit the parents height/width.

Since VideoPlayer is simply React wrapper for VideoJS. I assume the styles and class names are the same. I tried doing something like this:

import VideoPlayer from "react-video-js-player"

export const VideoJS = styled(VideoPlayer)`
position: relative;
height: 100%;
`

Setting the height and width to be 100% in the props doesn't work

   <VideoPlayer
       controls="true"
       height={"100%}
       width={"100%"}
       src="examplevideo"
   />
.

the parent container is set to 100% width and height. Any ideas?

UnluckyLAD
  • 169
  • 2
  • 18
  • You don't need to use styled-components for this as the player accepts `width` and `height` props. For percentage dimensions to work their parents need to have their dimensions to be set as well: https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work – Clarity Nov 20 '20 at 11:25
  • @Clarity I have a parent container that is set to 100% width and height. The videoPlayer only seems to work with fixed values. When I set its "height" and "width"as a percentage or "auto" in the props it doesn't do anything. – UnluckyLAD Nov 20 '20 at 11:29
  • @Clarity hence why I was asking to override default styles and how to do it. I assume the "position" needs to be overridden to relative for this to work with percentages. – UnluckyLAD Nov 20 '20 at 11:32

1 Answers1

1

I would do something like this , first inspect the video player element in browser to know what is its wrapper, let's say its a div . you can do something like this :

export const VideoPlayerWrapper= styled.div`
   >div{
   //this will target the videoPlayerwrapper 
   position: relative;
   height: 100%;
   }
`
سعيد
  • 1,547
  • 1
  • 14
  • 32