javascript 将 href 包裹在 iframe 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28917703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrap href around an iframe
提问by Lil-Kim
I want to wrap an href around a vimeo or youtube video and prevent the default playback click events of the embed and just go to the href. Does anyone know how to do this?
我想在 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>
回答by Matthew
html
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
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; }
回答by stefan
Use a div as overlay and surround it with your a tag. Read this article to see how to implement the div and using opaque for youtube: https://stackoverflow.com/a/4788044/4375900
I think with this info you should be possible to do what you want to do.
使用 div 作为叠加层并用 a 标签包围它。阅读这篇文章以了解如何为 youtube 实现 div 和使用不透明：https: //stackoverflow.com/a/4788044/4375900
我认为有了这些信息，你应该可以做你想做的事。
回答by Tyler
For cross browser support use this:
对于跨浏览器支持，请使用：
<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>
回答by Raphael Parent
I feel like it's worth mentionning that in my case, adding pointer-events: noneon the iFrame allowed the link to work with a structure looking like this
我觉得值得一提的是，在我的情况下，pointer-events: none在 iFrame 上添加允许链接使用看起来像这样的结构
<div>
<a href="#test">
<iframe [ATTRIBUTES]></iframe>
</a>
</div>
