我想在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>
答案 0 :(得分:16)
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; }
答案 1 :(得分:0)
使用div作为叠加层并用a标签将其包围。阅读本文,了解如何实现div并为youtube使用opaque:https://stackoverflow.com/a/4788044/4375900
我想有了这些信息,你应该可以做你想做的事。
答案 2 :(得分:0)
对于跨浏览器支持,请使用:
<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>
答案 3 :(得分:0)
我觉得值得一提的是,在我的案例中,在iFrame上添加pointer-events: none
可以使链接使用如下所示的结构
<div>
<a href="#test">
<iframe [ATTRIBUTES]></iframe>
</a>
</div>