0

I have the following table that represents some data from my database:

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

Please pay attention to the part of code where iframe is located:

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

All works fine except one moment. When I shrink my browser size to become bigger the video size is also increase that is fine. But when I decrease my browser size at some moment (the size of browser is still no very narrow) my video becomes just a square which I even can't to click on. On different mobile devices this problem results in that instead of video it represents just a little square that is unclickable.

enter image description here

In order to solve this proble I have used some technics like this one Responsive iframe using Bootstrap

It solves the problem of little square but the video becomes less responsible to size change that seems to me not very good solution.

Please help me to understand how to optimize my table containing iframe (video from youtube) in order to prevent this problem of video transffering to a little square.

Community
  • 1
  • 1
Bogdan
  • 864
  • 10
  • 18
  • 1
    Are you expecting the video to play and be viewable when the container is very small? If not, maybe consider swapping the iframe for a link in the smaller viewport. Or you could use bootstraps grid system instead of a table? – Skyler Austin Jan 13 '17 at 09:14
  • Yes I expect it to play and be viewable. Also video becomes little square while container is not very small. It sharply jumps from medium size to little square. Could grid solve the problem? – Bogdan Jan 13 '17 at 09:18
  • 1
    A grid system might help. It would help allow you to take advantage of all the available horizontal real estate instead of sharing a row with text. – Skyler Austin Jan 13 '17 at 09:22

1 Answers1

0

The first approach is just to appropirate different cell size for table elements depending on screen size (col-xs-10 col-sm-6 col-md-8 col-lg-8) so I have made:

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

The second approach to solve the problem is to use a grid (thank's to Skyler Austin) so I just have rebuild my code to:

<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>
Bogdan
  • 864
  • 10
  • 18