响应式 YouTube 嵌入 Flex 中-PHP中文网问答

我尝试在 Flex 容器中嵌入响应式 YouTube 以及其他一些内容，但 YouTube 嵌入的容器不会增长，因此要么重叠，要么被其他元素重叠。我不确定我是否解释得很好，所以我还制作了一个代码和盒子来演示：
https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.js
import { Box, Paper } from "@mui/material";

export default function App() {
  return (
    
      
        
          Some content
          
            
              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.
            
          
        
      
      
        
          YouTube player
          
            
          </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>
  );
}</pre>
<p>如何更改才能使嵌入的容器随着嵌入视频的大小而增大和缩小？
感谢您的帮助</p>            </div>
            <div class="share flexRow">
                <div class="shareReply flexColumn shareDiv">
                    <a href="javascript:;"><img class="sharerImg" src="/static/images/images/icon50.png" data-id="1"></a>
                    <span class="sharerSpan">1</span>
                </div>

                <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(174864)">
                    <a href="javascript:;" >
                                                    <img class="sharerImg" src="/static/images/images/icon52.png" data-id="2">
                                            </a>
                    <span class="sharerSpan">0</span>
                </div>


                <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 aiaskgoodICollection" data-id="">
                    <a href="javascript:;" >
                                                    <img class="sharerImg " src="/static/images/images/icon37.png" data-id="5">
                                            </a>
                    <span class="sharerSpan">0</span>
                </div>




            </div>
            <script>
                $('.jbtitleimg').on('click',function(){
                    $("#layuitc").hide()
                    var layer = layui.layer;
                    layer.closeAll();
                })
                $('.jbbtn').on('click',function(){
                    $("#layuitc").hide()
                    var layer = layui.layer;
                    layer.closeAll();
                })
                $('.sharerImg').mouseenter(function(e){
                    var dataId = e.currentTarget.dataset.id
                    if(dataId == 1){
                        // $('.shareReply').find('img').attr('src','/static/images/images/icon51.png')
                    }else if(dataId == 2){
                        // $('.shareLike').find('img').attr('src','/static/images/images/icon53.png')
                    }else if(dataId == 4){
                        $('.shareShare').find('img').attr('src','/static/images/images/icon55.png')
                    }else{

                    }

                })
                $('.sharerImg').mouseleave(function(e){
                    var dataId = e.currentTarget.dataset.id
                    if(dataId == 1){
                        // $('.shareReply').find('img').attr('src','/static/images/images/icon50.png')
                    }else if(dataId == 2){
                        // $('.shareLike').find('img').attr('src','/static/images/images/icon52.png')
                    }else if(dataId == 4){
                        $('.shareShare').find('img').attr('src','/static/images/images/icon54.png')
                    }
                })
            </script>
            <!--            <div class="reply">-->
            <!---->
            <!--                <div class="replyTop flexRow">-->
            <!--                    <div class="retLeft flexRow">-->
            <!--                        <img src="/static/images/examples/text55.png" class="retlAvatar" >-->
            <!--                        <span class="retlName">飞儿</span>-->
            <!--                    </div>-->
            <!--                    <a href="#"><img src="/static/images/images/icon-del.png" class="retRight"></a>-->
            <!--                </div>-->
            <!--                <img src="/static/images/examples/text26.jpg" class="replyTextarea">-->
            <!--                <button type="button" class="replayBtn">回答</button>-->
            <!--            </div>-->

            <div id="commentinput" class="info detail-comment-input layui-hide-sm">
                <div class="detail-ci-avator">
                    <img src="https://www.php.cn/static/images/user_avatar.jpg" alt="P粉111641966"/>
                    <div class="detail-r">
                        <span class="detail-name">P粉111641966</span>
                        <p class="detail-signal"></p>
                    </div>
                </div>
                <div id="js-reply-wrap">
                    <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div>
                    <div class="qa-ci-footer">
                        <div class="qa-ci-footright">
                            <button id="js-wenda-ci-submit" class="detail-btn" data-qid="174864">回答</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content">
                <div class="arTop flexRow">
                    <div class="artLeft flexRow fontBold fontColor1">全部回复<b class="artlb colorGrey">(1)</b></div>
                    <button class="artBtn ask-comment-answer">我来回复</button>
                </div>
                <div class="allReplayLine"></div>

                                <div class="wdsyConDiv flexRow ask_top_ul">
                    <img src="https://www.php.cn/static/images/user_avatar.jpg" alt="P粉329425839" class="wdcdImg">
                    <div class="wdcdContent flexColumn">
                        <div class="wdcdContentReply">
                            <div class="wdxqrcTop flexRow">
                                <a href="/member/1271658.html" target="_blank" class="wdcdcName">P粉329425839<b class="wdxqRcT colorGrey">2024-03-22 19:02:43</b></a>
                                <span class="wdxqrcTopspan colorGrey">1楼</span>
                            </div>
                            <div class="wdcdcCons"><p>更新</p>
<p>这是一个<a href="https://codesandbox.io/s/sharp-morning-85wytv" rel="nofollow noreferrer">codesandbox</a>解决方案。</p>
<ol>
<li>将 iframe 包裹在一个带有 <code>position: "relative"</code> 的容器中并设置其<br><code>宽度：“100%”</code>。</li>
<li>将容器的 <code>paddingBottom</code> 设置为所需的<br>
纵横比值（以百分比表示）。例如，对于 16:9 的宽高比，
使用<code>“56.25%”</code> (9 / 16 * 100%)。</li>
<li>将 iframe 设置为<code>位置：“绝对”、顶部：0、左侧：0、宽度：“100%”、高度：“100%”</code>。</li>
<li>要确保视频下的文本不会被隐藏，请设置 <code>flexFlow: "column",</code>
</li>
</ol>
<p>以下是如何实现此目的的示例：</p>
<pre class="brush:php;toolbar:false;">//Main container box
<box sx="{{" display: flexflow: change this line gap: maxwidth:></box></pre>
<p>一些其他代码</p>
<pre class="brush:php;toolbar:false;"><h2>YouTube player</h2>
<box sx="{{" position: width: paddingbottom: for aspect ratio><iframe src="https://www.youtube.com/embed/-opb8DdWBIM" title="YouTube video player" style="{{" position: top: left: width: height: border:>