在 Shopify 上添加指向 vimeo 视频的链接

Question

在我们的网站上，我们使用 vimeo 在我们的主页上显示“签名样式”的轮播视频。我想添加一个链接，以便当您单击此视频时，它将引导您进入“签名样式”页面。

我不熟悉使用 Liquid/shopify。我知道如何在 HTML 中执行此操作，但它似乎不像我想象的那样工作。

这是“background-video.liquid”文件中的原始代码：

<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="background-video" data-section-settings='{{ section_settings }}'>
  <div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}">
    <div class="ImageHero__VideoHolder"></div>
  </div>
</section>

这是我尝试用以下代码替换上述行的一些代码：

<a href="https://www.clarasunwoo.com/search?q=signature+styles&type=product">
<div style="padding:56.25% 0 0 0;position:relative;">

<iframe src="https://vimeo.com/540236561" 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>

Answer 1

您需要做的就是创建一个覆盖 div，“阻止”实际 iframe 通过 z-index 与之交互。然后您可以使用 JavaScript 来处理用户的点击和重定向。

<div style="padding: 56.25% 0 0 0; position: relative">
    <iframe
    src="https://vimeo.com/540236561"
    style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    "
    frameborder="0"
    allow="autoplay; fullscreen"
    allowfullscreen
    ></iframe>

    <div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;"></div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

<script>
    const overlay = document.querySelector(".overlay");

    overlay.onclick = function () {
    window.location.href = "https://www.clarasunwoo.com/search?q=signature+styles&type=product";
    };
</script>