【问题标题】:Wrap href around an iframe将 href 包裹在 iframe 周围
【发布时间】:2015-05-09 04:11:33
【问题描述】:

我想在 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>

【问题讨论】:

  • ...如果您使用 JavaScript 并在点击 a 元素时应用 stopPropagation,也许会有所帮助。

标签: javascript jquery iframe href


【解决方案1】:

我觉得值得一提的是,在我的例子中,在 iFrame 上添加 pointer-events: none 可以让链接使用这样的结构

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

【讨论】:

    【解决方案2】:

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

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

      使用 div 作为覆盖并用你的 a 标签包围它。阅读这篇文章,了解如何实现 div 并为 youtube 使用 opaque:https://stackoverflow.com/a/4788044/4375900
      我认为有了这些信息,您应该可以做您想做的事情。

      【讨论】:

        【解决方案4】:

        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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-01-07
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多