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

Обратите внимание на ту часть кода, где находится iframe:

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

Все работает хорошо, кроме одного момента. Когда я уменьшаю размер браузера, чтобы стать больше, размер видео также увеличивается, что нормально. Но когда я уменьшаю размер своего браузера в какой-то момент (размер браузера все еще не очень узкий), мое видео становится просто квадратом, на который я даже не могу нажать. На разных мобильных устройствах эта проблема приводит к тому, что вместо видео он представляет собой просто маленький квадрат, который не поддается фильтрации.

Введите описание изображения здесь

Для того, чтобы решить эту проблему я использовал некоторые методы, как это один отзывчивый iframe с помощью Bootstrap

Это решает проблему маленького квадрата, но видео становится менее ответственным к изменению размера, что кажется мне не очень хорошим решением.

Пожалуйста, помогите мне понять, как оптимизировать мою таблицу, содержащую iframe (видео с youtube), чтобы предотвратить эту проблему передачи видео на маленький квадрат.

1 ответ

  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>
    

    Второй подход к решению проблемы заключается в использовании сетки (спасибо Скайлеру Остину), поэтому я просто перестраиваю свой код, чтобы:

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