How to override third party default styles using Styled Components

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?

1 answer

  • answered 2020-11-20 11:45 سعيد

    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%;
       }
    `