0
163
ViewsNo se puede hacer que la altura de una película MP4 cambie y quepa en Material Box tanto horizontal como verticalmente
Aprendo JavaScript React y ahora tengo un problema con el posicionamiento de una película MP4.
Tengo un Codesandbox
Verifique el archivo FileContentRenderer.jsx donde se usa el video html5 con MP4.
Quiero que se ajuste a la Box de material en vertical con, digamos, height: '20vw y horizontal, pero haga lo que intente, no puedo hacer que cambie. Debo haberme perdido algunos consejos fundamentales, por favor.
Así, aquí la película debería ser solo un cuarto de la altura y no tan mega alta. Independientemente de lo que intente, esta altura no se puede reducir, ¿por favor, consejo?
Tengo este Material withStyles que no funciona haciendo que el MP4 se vea bien
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', }, });No importa qué película intente, la película se niega a encajar en la caja.
2 answers
Answer question0
Creo que este fragmento de código es lo que estás buscando. Mantiene la altura y la relación de aspecto. Hace un video centrado. y el ancho del video es 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>Obviamente, no puede mantener fijos tanto el ancho como la altura mientras sus videos tengan diferentes relaciones de aspecto. Uno de ellos debe ser variable. Este código mantiene la altura fija.