将href包装在一个iframe中

Question

我想在 Vimeo 或 YouTube 视频周围添加 href，并防止嵌入式播放的默认点击事件，只需跳转到 href。 有人知道如何做吗？

<a href="http://tumblr.com" target="_blank" class="linkwrap">

   <iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>    

 </a>

- Lil-Kim

---

也许如果您在aе…ѓзґ дёЉдЅїз”ЁJavaScript并应用stopPropagation来点击，会有所帮助。 - pbaldauf

Answer 1

HTML

<a href="http://tumblr.com" target="_blank" class="linkwrap">
    <div class="blocker"></div>
    <iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>

CSS

.linkwrap { position:relative; display:inline-block; }
.blocker { position:absolute; height:100%; width:100%; z-index:1; background:rgba(255,0,0,0.5);  }
.linkwrap iframe { z-index: 2; }

jsfiddle - 这里

- Matthew

Answer 2

使用div作为覆盖层并将其包围在a标记中。阅读本文以了解如何实现div和对YouTube使用不透明度: https://dev59.com/CG865IYBdhLWcg3wa-A0#4788044
我认为有了这些信息，你应该能够做到你想做的事情。

- stefan

Answer 3

我觉得值得一提的是，在我的情况下，将 pointer-events: none 添加到 iFrame 上允许链接在以下结构中正常工作

<div>
    <a href="#test">
        <iframe [ATTRIBUTES]></iframe>
    </a>
</div>

- Raphael Parent

Answer 4

为了跨浏览器支持，请使用以下代码：

<div style="position:relative;">
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0"></iframe>
<a  href="http://tumblr.com" target="_blank" style="position:absolute; bottom:0; left:0; display:inline-block;"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="420px" height="315px"></a>
</div>

- Tyler