0
164
ViewsCan't make an MP4 movie height to change and fit in Material Box both landscape and portait
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
2 answers
Answer question0
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.