1

我目前正在使用一个应用程序，用户可以在其中上传来自 Vine 和 Instagram 的剪辑。

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

但是我需要一个Overlay这样，当人们点击剪辑时，它会将他们重定向到剪辑页面（就像我在 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;
}
4

1 回答 1

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;
}
于 2013-08-28T11:29:20.167 回答