Asp.net 表中的引导iframe视频变小

下表显示了我数据库中的一些数据：

<div class="table-responsive">
<table class="table-condensed">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Video)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Tabs)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td class="col-md-7">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="@item.Video" frameborder="1" allowfullscreen></iframe>
    </div>
</td>
                    <td class="col-md-2">
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td class="col-md-2">
                        @Html.DisplayFor(modelItem => item.Tabs)
                    </td>

                    <td>
                        <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                        <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
                        <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@DisplayNameFor（model=>model.Video）
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Tabs）
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Tabs）

为了解决这个问题，我使用了一些像这样的技术

它解决了小正方形的问题，但视频对大小变化的责任变小了，这在我看来不是很好的解决方案

请帮助我了解如何优化包含iframe（来自youtube的视频）的表格，以防止视频传输到一个小正方形。
第一种方法是根据屏幕大小（col-xs-10 col-sm-6 col-md-8 col-lg-8）为表格元素分配不同的单元格大小，因此我提出：

<td class="col-xs-10 col-sm-6 col-md-8 col-lg-8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="@item.Video" controls="1" frameborder="1" allowfullscreen></iframe>
    </div>
</td>



解决此问题的第二种方法是使用网格（感谢Skyler Austin），因此我只需重建代码即可：

<div class="container">
            <header class="row">
                <div class="col-sx-6 col-sm-6 col-md-6 col-lg-6">@Html.DisplayNameFor(model => model.Video)</div>
                <div class="col-sx-2 col-sm-2 col-md-2 col-lg-2">@Html.DisplayNameFor(model => model.Name)</div>
                <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">@Html.DisplayNameFor(model => model.Tabs)</div>
                <div class="col-sx-1 col-sm-1 col-md-1 col-lg-1">Admin</div>
            </header>
                                @foreach (var item in Model)
                                {
                                    <div class="row">
                                        <div class="col-sx-6 col-sm-6 col-md-6 col-lg-6">
                                            <div class="embed-responsive embed-responsive-16by9">
                                                <iframe class="embed-responsive-item" src="@item.Video" frameborder="1" allowfullscreen></iframe>
                                            </div>
                                        </div>
                                        <div class="col-sx-2 col-sm-2 col-md-2 col-lg-2">@Html.DisplayFor(modelItem => item.Name)</div>
                                        <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">@Html.DisplayFor(modelItem => item.Tabs)</div>
                                        <div class="col-sx-1 col-sm-1 col-md-1 col-lg-1">
                                            <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                                            <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
                                            <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
                                        </div>
                                    </div>
                                }
    </div>


@DisplayNameFor（model=>model.Video）
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Tabs）
管理
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Tabs）
编辑|
细节|
删除
}
当容器很小的时候，你希望视频播放和可视吗？如果没有，可以考虑在较小的视口中交换iFrAME，或者你可以使用引导系统来代替表。是的，我希望它能播放和观看。而且视频变得小，而容器不是很小。y从中等大小跳到小正方形。网格能解决这个问题吗？网格系统可能会有所帮助。它将帮助您利用所有可用的水平不动产，而不是与文本共享一行。
<div class="container">
            <header class="row">
                <div class="col-sx-6 col-sm-6 col-md-6 col-lg-6">@Html.DisplayNameFor(model => model.Video)</div>
                <div class="col-sx-2 col-sm-2 col-md-2 col-lg-2">@Html.DisplayNameFor(model => model.Name)</div>
                <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">@Html.DisplayNameFor(model => model.Tabs)</div>
                <div class="col-sx-1 col-sm-1 col-md-1 col-lg-1">Admin</div>
            </header>
                                @foreach (var item in Model)
                                {
                                    <div class="row">
                                        <div class="col-sx-6 col-sm-6 col-md-6 col-lg-6">
                                            <div class="embed-responsive embed-responsive-16by9">
                                                <iframe class="embed-responsive-item" src="@item.Video" frameborder="1" allowfullscreen></iframe>
                                            </div>
                                        </div>
                                        <div class="col-sx-2 col-sm-2 col-md-2 col-lg-2">@Html.DisplayFor(modelItem => item.Name)</div>
                                        <div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">@Html.DisplayFor(modelItem => item.Tabs)</div>
                                        <div class="col-sx-1 col-sm-1 col-md-1 col-lg-1">
                                            <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                                            <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
                                            <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
                                        </div>
                                    </div>
                                }
    </div>