iframe in razor view engine loading only first item

Question

I have a razor view where i'm rendering several iframes (Youtube videos embed with iframe) and only renders the first one. Anyone knows how to fix it? Below I put my view code,

 

 

foreach (var item in Model)

{

<div class="col-lg-3">

<a href="@item.TrailerURL.Replace("/?autoplay=0", "/?autoplay=1")" title="list">

<img src="@item.thumbnail" id="kk" />

@item.name

</a>

<!-- Trigger the modal with a button -->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

<!-- Modal -->

<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog modal-sm">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>

<h4 class="modal-title">Modal Header</h4>

</div>

<div class="modal-body">

<iframe id="iframemv" src="@item.TrailerURL"></iframe>    (((((here iam loading ifraame)

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

</div>

}