Can't make an MP4 movie height to change and fit in Material Box both landscape and portait

user_11749004 0
Viewed 228

I learn JavaScript React and now I have problem with positioning of an MP4 movie.
I have a Codesandbox

Check the file FileContentRenderer.jsx where the html5-video is used with MP4.

I want it to fit the material Box in portrait with let's say height: '20vw and landscape but whatever I try I can't get it to change I must have missed some fundamental please advice

Like this, here the movie should be just a 4th of the height and not this mega high. Whatever I try this height can't be reduced please advice?

I have this Material withStyles that is not working making the MP4 look good

const styles = theme => ({
    viewerWrapperMp4: {
        background: 'black',
        width: '100%',
        height: '20vw',
        textAlign: 'center',
    },
    viewerMp4: {
        width: 'auto',
        height: '100%',
    },
    outer: {
        height: '100%',
        width: '100%',
        position: 'relative',
        overflow: 'hidden',
    },
});

It does not matter what movie I try the movie refuses to fit the Box

enter image description here

material-ui reactjs mp4 html5-video javascript
2 Answers

I believe this piece of code is what you're looking for. It keeps the height and aspect ratio. It makes a video centered. and the width of video is variable.

.video-container {
background: black;
width: 100%;
height: 20vw;
text-align: center;
}

.video {
width: auto;
height: 100%;
}
<div class="video-container">
 <video class="video" controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video> 
<div>

Obviously, you can't keep both width and height fixed while your videos has different aspect ratios. One of them must be variable. This code keeps height fixed.

user_173448990

I've changed your code to this and in the final result, you should change video element CSS to this:

  maxHeight: "20vw";
user_124990750
Related