Card Media from MUI not resizing correctly?

Hi there I'm trying to set up an IFrame using CardMedia from MUI but for some reason the width of the card media doesn't seem to be working properly is just ignoring what ever I set it up to.

So I have the following:

<Box mb={3} sx={{display: 'flex', justifyContent: 'center',  mr: 2,  color: "white"}}>
   <CardMedia
    component = "iframe"
    src="https://trovo.live/embed/player?streamername=SomeStreamerName&autoplay=1"
    height="800>"
    width="1020"
    frameborder="2"
    allowfullscreen>
   </CardMedia>
                            
   <CardMedia
    component = "iframe"
    src="https://trovo.live/chat/SomeStreamerName"
    height="800"
    width="300">
  </CardMedia>
</Box>

But it comes out like this:

However if I just use regular iFrame it works perfectly fine so I just wanted to know what I was doing wrong with CardMedia from MUI and how to fix it.

<Box mb={3} sx={{display: 'flex', justifyContent: 'center',  mr: 2,  color: "white"}}>
 <iframe
  src="https://trovo.live/embed/player?streamername=SomeStreamer&autoplay=1"
  height="800>"
  width="1020"
  frameborder="2"
  allowfullscreen>
</iframe>
                        
 <iframe
  src="https://trovo.live/chat/SomeStreamer"
  height="800"
  width="300">
</iframe>
</Box>