Question

我有下表代表我数据库中的一些数据：

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

请注意iframe所在的代码部分：

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="@item.Video" frameborder="1" allowfullscreen></iframe>
    </div>

除了片刻之外，一切正常。当我缩小浏览器大小以使视频大小变大时，视频大小也会增加。但是当我在某个时刻减少我的浏览器大小（浏览器的大小仍然不是很窄）时，我的视频变成了一个我甚至无法点击的正方形。在不同的移动设备上，这个问题导致代替视频，它只代表一个不可点击的小方块。

为了解决这个问题，我使用了一些像Responsive iframe using Bootstrap

这样的技术

它解决了小方块的问题，但视频变得不那么负责大小变化，这对我来说似乎不是很好的解决方案。

请帮助我了解如何优化包含iframe的表格（来自youtube的视频），以防止视频转播问题变成一个小方块。

Answer 1

第一种方法是根据屏幕尺寸（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>

表中的Bootstrap iframe视频变得很小

1 个答案: