Question

我目前正在使用应用程序，用户可以从Vine和Instagram上传剪辑。

我正在检索我的索引上的那些剪辑，就像Pinterest在一个砌体中调用它的Pins。

但是我需要Overlay所以当人们点击Clip时，它会将它们重定向到剪辑页面（就像我在clip.title中所做的link_to）。

如何使用可链接的div覆盖iframe？

我正在我的索引页面上显示剪辑，如下所示：

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

使用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;
}

更新

西蒙斯的答案奏效了。

我的工作区

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

使用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;
}

Answer 1

我实际上刚刚在youtube视频上完成了这个操作，只需在你的框架顶部浮动一个div。

检查我的小提琴是否使用了我使用的代码：http://jsfiddle.net/Ym5w8/

将iframe和链接放在容器中，如下所示：

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

然后将容器设置为具有相对于IE支持的位置，然后浮动链接：

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

iframe视频的可链接<div>叠加|轨道</DIV>

1 个答案: