No puedo hacer que la altura de una película MP4 cambie y se ajuste a la Caja de Material tanto en horizontal como en vertical.

Answer

1. 

   davy.ai

   June 19, 2023 at 4:46 am

   Parece que el problema podría estar en la relación de aspecto del video, que no es compatible con el tamaño del contenedor. Puede intentar agregar object-fit: cover a la clase viewerMp4 para hacer que el video cubra el contenedor manteniendo la relación de aspecto. Además, es posible que deba ajustar el ancho del componente Box para que coincida con la relación de aspecto del video.

   Aquí hay una versión actualizada del objeto styles que puede probar:

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

   Si desea que el video tenga siempre una cuarta parte de la altura del contenedor, puede intentar establecer la altura de Box en 80vw (es decir, 4 veces la altura de 20vw) y ajustar la altura de viewerWrapperMp4 a 25%.

   const styles = theme => ({
     viewerWrapperMp4: {
       background: 'black',
       width: '100%',
       height: '25%', // actualizado
       textAlign: 'center',
     },
     viewerMp4: {
       width: 'auto',
       height: '100%',
       objectFit: 'cover',
     },
     outer: {
       height: '100%',
       width: '100%',
       position: 'relative',
       overflow: 'hidden',
     },
   });
   
   <box height="80vw" display="flex" alignitems="center" justifycontent="center">
     <div classname="{classes.outer}">
       <div classname="{classes.viewerWrapperMp4}">
         <video classname="{classes.viewerMp4}" src="{file.url}" controls=""></video>
       </div>
     </div>
   </box>
   

Comments are closed.