【问题标题】:How to add a click through link to an embedded vimeo video?如何将点击链接添加到嵌入式 vimeo 视频?
【发布时间】:2021-02-27 18:15:24
【问题描述】:

我已使用以下代码在我的网站上嵌入 vimeo 视频:

<div style="padding:56.25% 0 0 0;position:relative;">

<iframe src="https://player.vimeo.com/video/477531257?background=1&autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

</div><script src="https://player.vimeo.com/api/player.js"></script>

当用户点击视频网址时,如何将用户重定向到视频网址?

【问题讨论】:

    标签: css iframe href embed vimeo


    【解决方案1】:

    你可以使用锚标签

    &lt;a href=""&gt;&lt;/a&gt;

    并在 href 中用引号括起来网址。 如果解决了您的问题,请告诉我并投票。

    【讨论】:

    • 谢谢!不幸的是,我无法让它工作!我是否将 href 放在了错误的位置?
    • @davidjsbrown 您必须将 iframe 标签放在锚标签中才能获得所需的输出
    【解决方案2】:

    将其包装在a tag 中,并将您的链接放入他们的。像这样:

    <a href="/yourlink">
    <div style="padding:56.25% 0 0 0;position:relative;">
    
    <iframe src="https://player.vimeo.com/video/477531257?background=1&autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    
    </div><script src="https://player.vimeo.com/api/player.js"></script>
    </a>
    

    并将pointer-events: none; 添加到您的iframe

    iframe { pointer-events: none; }

    【讨论】:

    • 嘿,谢谢!我添加了代码并更新了网址,但视频不可点击。 davidjackspencer.co 如果有帮助,这是此页面上的顶部视频。查看网站的密码是 DJSB2020PORTFOLIO 谢谢!!
    • 感谢您让我检查您的网站。我忘记了一件事!您需要将pointer-events: none; 添加到iframe。我也编辑了我的遮阳篷!祝你好运。
    • @davidjsbrown 在您的 css 中,在您的 iframe 上(查看我发布的 awnser)。或者使用内联 css,像这样:&lt;iframe src="https://player.vimeo.com/video/477531257?background=1&amp;autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0" style="pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;
    • 你这个英雄!非常感谢!
    • @davidjsbrown 没问题!你能把我的遮阳篷标记为正确的吗?谢谢!
    猜你喜欢
    • 1970-01-01
    • 2015-02-16
    • 1970-01-01
    • 1970-01-01
    • 2015-03-24
    • 1970-01-01
    • 2022-08-24
    • 2015-01-14
    • 2021-09-12
    相关资源
    最近更新 更多