Html 使用表格对齐视频并适合div大小

Html 使用表格对齐视频并适合div大小,html,css,video,containers,Html,Css,Video,Containers,我需要在中央容器中对齐和安装视频。视频应该完全适合容器大小,如果屏幕大小发生变化,视频的比例应该相同。x轴上不应有滚动条 <div class="form-row" style=""> <div class="card-body-container" style="max-height:50vh;width:33%;overflow-y:auto;float:left;margin-left:0.5%&q

我需要在中央容器中对齐和安装视频。视频应该完全适合容器大小,如果屏幕大小发生变化,视频的比例应该相同。x轴上不应有滚动条

<div class="form-row" style="">
  <div class="card-body-container" style="max-height:50vh;width:33%;overflow-y:auto;float:left;margin-left:0.5%">
  <p>Container1 content<p>
  </div>
 
 <div class="card-body-container" style="max-height:50vh;width:33%;overflow:auto">
                <h4 class="" style="text-align:left">
                   Videos
                </h4>
                <hr />
           
                    <table style="width:100%; table-layout:fixed">
                        <tr>
                            <td >                              
                                 <video   controls>
                                        <source src="~/Images/samplevid.mp4" type="video/mp4" />
                                       
                                  </video>                         
                            </td>
                            <td >
                                <video   controls>
                                    <source src="~/Images/samplevid.mp4" type="video/mp4" />
                          
                                </video>    
                            </td>
                        </tr>
                        <tr>
                            <td >
                                <video   controls>
                                    <source src="~/Images/samplevid.mp4" type="video/mp4" />
                                    
                                </video>
                            </td>
                            <td >
                                <video  controls>
                                    <source src="~/Images/samplevid.mp4" type="video/mp4" />
                                  
                                </video>
                            </td>
                        </tr>
                    </table>
           
            
                </div>
                
                  <div class="card-body-container" style="max-height:50vh;width:28%;float:right;overflow:auto">
                    <p>Container2 content<p>
                  <div>
                  </div>

容器1含量
视频

容器2含量