When utilizing material-ui, I am seeking assistance with fixing the full video width on the screen. I have tried using width:auto. Attached below is an image for reference. Could someone please provide guidance on how to resolve this? Thank you in advance.
https://i.sstatic.net/IAnEl.jpg
This is my code snippet:
<Row className="waitingVideo">
<Col xs={3} className="waitingRoom">
<WaitingRoom customerList={waitingRoom} accept={accept} chat={chat} reject={reject}></WaitingRoom>
<Accordion className={classes.customers}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>customer 1</Typography>
<ChatIcon className={classes.chat} onClick={chat}></ChatIcon>
</AccordionSummary>
<AccordionDetails>
<Typography>Lorem gkfgs shfksk sfkugsk sfkugs hfgsek</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>customer 2</Typography>
<ChatIcon className={classes.chat} onClick={chat}></ChatIcon>
</AccordionSummary>
<AccordionDetails>
<Typography>Lorem gkfgs shfksk sfkugsk sfkugs hfgsek</Typography>
</AccordionDetails>
</Accordion>
</Col>
<Col xs={9}>
<video meta name="viewport" content="width=device-width" id="localVideo" width="auto" autoPlay playsInline controls={false} muted={true}/>
</Col>
</Row>