Hola, estoy tratando de configurar un IFrame usando CardMedia de MUI, pero por alguna razón, el ancho de la tarjeta no parece funcionar correctamente, solo ignora lo que configuré.

Así que tengo lo siguiente:

 <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>

Pero sale así:

Sin embargo, si solo uso iFrame normal, funciona perfectamente bien, así que solo quería saber qué estaba haciendo mal con CardMedia de MUI y cómo solucionarlo.

 <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>