title: Linkable <Div> Overlay on iframe Video | Rails
body: <p>I'm currently on an App where users can upload Clips from Vine and Instagram.</p>
  
  <p>I'm retrieving those clips on my Index like Pinterest calls its Pins, in a Masonry.</p>
  
  <p>But i need an <code>Overlay</code> so when people click on the Clip it redirects them to the clips page (Like the link_to i did in the clip.title).</p>
  
  <p>How can i overlay the iframe with a linkable div ?</p>
  
  <p>I'm displaying the clips on my Index page like so:</p>
  
  <pre><code>    &lt;div class="clip-box"&gt;
  
    &lt;% if clip.vine_link.present? %&gt;
      &lt;iframe class="vine-embed"
              src="https://vine.co/v/&lt;%= clip.vine_link %&gt;/embed/postcard"
              width="200" height="200" frameborder="0"
              allowtransparency="false"&gt;
      &lt;/iframe&gt;
  
    &lt;% else %&gt;
  
      &lt;iframe src="http://instagram.com/p/&lt;%= clip.instagram_link %&gt;/embed/"
              width="190" height="200" frameborder="0" scrolling="no"
              allowtransparency="false"&gt;
      &lt;/iframe&gt;
  
    &lt;% end %&gt;
  
  
    &lt;p class="clip-title"&gt;
      &lt;%= link_to clip.title, clip %&gt;
    &lt;/p&gt;
  
    &lt;p class="clip-uploader pull-left"&gt;
      &lt;strong&gt;
        &lt;%= link_to clip.user.user_name, clip.user %&gt;
      &lt;/strong&gt;
    &lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>With the Css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Simons answer worked.</p>
  
  <p>My Working Div</p>
  
  <pre><code>&lt;div align="center iframe-div" style="position: relative;"&gt;
  
        &lt;!-- Instagram Video --&gt;
        &lt;%= link_to "", clip, class: "iframe-link" %&gt;
        &lt;iframe src="http://instagram.com/p/&lt;%= clip.instagram_link %&gt;/embed/"
                width="190" height="200" frameborder="0" scrolling="no"
                wmode="Opaque" class="video-iframe" allowtransparency="false"&gt;
        &lt;/iframe&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>with the Css:</p>
  
  <pre><code>.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;
  }
  </code></pre>