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?
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%;
}
`
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments