1

私は現在、ユーザーが Vine と Instagram からクリップをアップロードできるアプリを使用しています。

ピンタレストがメイソンリーでピンと呼ぶように、私はインデックスでそれらのクリップを取得しています。

しかし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 に答える