html - Linkable <Div> Overlay on iframe Video | Rails -

i'm on app users can upload clips vine , instagram.

i'm retrieving clips on index pinterest calls pins, in masonry.

but need overlay when people click on clip redirects them clips page (like link_to did in clip.title).

how can overlay iframe linkable div ?

i'm displaying clips on index page 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 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; } 

update

simons answer worked.

my working div

<div align="center iframe-div" style="position: relative;">        <!-- instagram video -->       <%= link_to "", clip, class: "iframe-link" %>       <iframe src="http://instagram.com/p/<%= clip.instagram_link %>/embed/"               width="190" height="200" frameborder="0" scrolling="no"               wmode="opaque" class="video-iframe" allowtransparency="false">       </iframe>     </div> 

with css:

.iframe-link {   position: absolute;   left: 0px;   right: 0px;   width: 100%;   height: 100%;   z-index: 999;   background-color: white; opacity: 0.5; }  .iframe-div {   position: relative; } 

i finished doing on youtube video, float div on top of frame.

check fiddle code used: http://jsfiddle.net/ym5w8/

place iframe , link inside container so:

<div align="center" class="container">     <a href="http://thelink" class="the-click"></a>     <iframe wmode="opaque" class="video-iframe" width="100%" height="315" src="//www.youtube.com/embed/zaurzns8bmg" frameborder="0" allowfullscreen="">     </iframe> </div> 

then style container have position relative ie support float link:

.the-click {     position: absolute;     left: 0px;     right: 0px;     width: 100%;     height: 100%;     z-index: 999; }