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

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

Answer 2

使用 div 作为叠加层并用您的 a 标签包围它。阅读这篇文章，了解如何实施 div 和使用 opaque for youtube：
我认为有了这些信息，您应该可以做您想做的事。

Answer 3

对于跨浏览器支持，使用这个：

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

Answer 4

我觉得值得一提的是，在我的案例中，在 iFrame 上添加 pointer-events: none 允许 link 使用如下所示的结构

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

将 href 包裹在 iframe 周围

Wrap href around an iframe

javascript

jquery

iframe

href