如何在Shopify站点为Vimeo视频添加跳转指定页面的链接

问题原因 #

你原来的代码直接在<iframe>外层套<a>标签无法生效，是因为iframe属于跨域的独立嵌入文档，内部的点击事件会被Vimeo的页面拦截，不会触发外层a标签的跳转。

最简解决方案（遮罩层法，无需复杂API调用） #

直接在iframe上方加一个全屏透明遮罩层，捕获点击事件触发跳转，同时保留原有Shopify section的结构避免主题样式错乱，完整替换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" style="padding:56.25% 0 0 0;position:relative;">
      <!-- 跳转链接包裹层 -->
      <a href="https://www.clarasunwoo.com/search?q=signature+styles&type=product" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;">
        <!-- 透明遮罩层，捕获点击 -->
        <div style="width:100%;height:100%;background:transparent;"></div>
      </a>
      <!-- Vimeo视频 iframe -->
      <iframe src="https://vimeo.com/540236561?autoplay=1&muted=1&loop=1&controls=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
  </div>
</section>

代码说明 #

1. 保留了原有section的所有属性，不会影响主题编辑器对该模块的识别和设置项使用
2. iframe的url参数做了适配：autoplay=1自动播放、muted=1静音（符合浏览器自动播放规则）、loop=1循环播放、controls=0隐藏控制条，你可以根据需求调整这些参数
3. 透明遮罩层高z-index覆盖在iframe上方，点击任意区域都会触发a标签跳转

如果你需要保留视频控制条功能 #

可以改用Vimeo Player API监听点击事件实现跳转，代码如下：

<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" style="padding:56.25% 0 0 0;position:relative;">
      <iframe id="signatureVideo" src="https://vimeo.com/540236561?autoplay=1&muted=1&loop=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
  </div>
</section>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
const player = new Vimeo.Player('signatureVideo');
// 监听视频点击事件
player.on('click', function() {
  window.location.href = 'https://www.clarasunwoo.com/search?q=signature+styles&type=product';
});
</script>

内容的提问来源于stack exchange，提问作者Carly DiPasquale