Using reactjs, I'm inserting a video in a component but it doesn't seems to like when I use a relative unit in the max-height
I've set for the container.
And I'd like to use vh
to set the max-height
, but when I do the video goes above the other contents of the page (like a wild z-index
) and don't work like a child-block that'd set the container's dimensions...
Is it possible to counter/avoid that effect?
Simplified render method :
render() {
return (
<div className='ThatComponentContainer'>
<div>
<p>Some content</p>
</div>
<div className='VideoPlayer' width='520' height='294'>
<video controls preload="auto" width='520' height='294'>
<source src={VideoWEBM} type="video/webm" />
<p>I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.</p>
</video>
</div>
<div>
Some other cotent
</div>
</div>
);
}
CSS:
.ThatComponentContainer {
display: flex;
}
.VideoPlayer video {
min-height: 100%;
height: auto;
}
.VideoPlayer {
/*
max-height: 20vh; <<<----- I'd like to use this */
max-height: 588px;
min-height: 294px;
height: auto;
max-width: 90%;
width: auto;
}
Here is the video, and I've another issue but I can't seem to find anything about it...
The video's controls are over the video's bottom, hence you can't see a part of the video.
I'd like to have the controls under the video, is it possible?.
shadow-dom
, currently there is no support for moving it outside of video component. For your case, you can use custom skin for video player. Check out this developer.mozilla.org/en-US/Apps/Fundamentals/… for more information