Bootstrap iframe video in table becomes tiny - asp.net

Question

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

Answer 1

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>