Linkable Overlay on iframe Video | Rails

Linkable Overlay on iframe Video | Rails

I'm currently on an App where users can upload Clips from Vine and Instagram.
I'm retrieving those clips on my Index like Pinterest calls its Pins, in a
Masonry.
But i need an Overlay so when people click on the Clip it redirects them
to the clips page (Like the link_to i did in the clip.title).
How can i overlay the iframe with a linkable div ?
I'm displaying the clips on my Index page like so:
<div class="clip-box">
<% if clip.vine_link.present? %>
<iframe class="vine-embed"
src="https://vine.co/v/<%= clip.vine_link %>/embed/postcard"
width="200" height="200" frameborder="0"
allowtransparency="false">
</iframe>
<% else %>
<iframe src="http://instagram.com/p/<%= clip.instagram_link %>/embed/"
width="190" height="200" frameborder="0" scrolling="no"
allowtransparency="false">
</iframe>
<% end %>
<p class="clip-title">
<%= link_to clip.title, clip %>
</p>
<p class="clip-uploader pull-left">
<strong>
<%= link_to clip.user.user_name, clip.user %>
</strong>
</p>
</div>
With the Css:
.clip-box {
width: 200px;
margin: 8px;
font-size: 11px;
line-height: 1.4em;
float: left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0px 0px 6px 1px #ccc;
overflow: hidden;
}
.clip-title {
margin: 0px;
padding: 7px;
font-size: 13px;
border-bottom: 1px solid lightgray;
}
.clip-uploader {
margin: 0px;
padding: 7px;
font-size: 11px;
}