我目前正在使用一个应用程序,用户可以在其中上传来自 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;
}