I'm having an issue trying to make a responsive YouTube embed work inside a flex container alongside other content. The problem is that the container for the YouTube embed doesn't resize properly and ends up overlapping with other elements. To better illustrate this problem, I've created a demo on CodeSandbox:
import { Box, Paper } from "@mui/material";
export default function App() {
return (
<Box
sx={{
display: "flex",
flexFlow: "column wrap",
gap: 2,
maxWidth: "960px"
}}
>
<Box>
<Paper
variant="outlined"
sx={{
padding: 2
}}
>
<h2>Some content</h2>
<Box>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
maximus at enim in sollicitudin. Nam suscipit tellus sit amet
porttitor hendrerit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vel dolor felis. Nulla sodales felis
iaculis venenatis aliquam. Integer vehicula turpis a mauris
maximus, eu sagittis ligula dignissim. In faucibus est lacus,
auctor ornare lacus auctor ut. Morbi vitae ullamcorper nisi.
Integer non sagittis erat.
</p>
</Box>
</Paper>
</Box>
<Box>
<Paper
variant="outlined"
sx={{
padding: 2
}}
>
<h2>YouTube player</h2>
<Box sx={{ display: "flex" }}>
<iframe
src="https://www.youtube.com/embed/-opb8DdWBIM"
title="YouTube video player"
style={{
margin: "0 auto",
width: "100%",
aspectRatio: "16 / 9"
}}
/>
</Box>
</Paper>
</Box>
<Box>
<Paper
variant="outlined"
sx={{
padding: 2
}}
>
<h2>Some other content</h2>
<p>
In vehicula a est non tempor. Maecenas ut leo ac arcu sollicitudin
ullamcorper et vitae lectus. In venenatis lectus purus, non rhoncus
ante pellentesque a. Sed sollicitudin leo sit amet odio ultricies
pretium. Mauris eu nibh diam. Sed ante ipsum, efficitur ac leo eget,
cursus ornare augue. Morbi aliquet porta rhoncus. Quisque ut tellus
metus. Nam purus arcu, accumsan a dolor at, rhoncus iaculis velit.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Nulla augue metus, semper id varius sit
amet, congue vitae nunc. Phasellus interdum arcu quis quam tristique
porta. Curabitur sit amet imperdiet turpis, ut facilisis mauris.
Aliquam sit amet commodo nisi. Quisque elementum nulla ac
ullamcorper interdum. Aliquam interdum sed lorem a tempus.
</p>
</Paper>
</Box>
</Box>
);
}
If you have any suggestions on how to ensure that the embed's container grows and shrinks according to the size of the video, please share your insights. Thank you for your assistance!