Shopify模板中基于Schema字段实现单一视频渲染的问题

数据老陈

2026-8-13

问题解决：仅显示指定类型的单个视频

问题说明

在Schema中定义了两个视频字段：一个是Youtube专属的video_url字段，另一个是自定义上传视频的video_urlt文本字段，需要在首页仅显示其中一个有效视频，但原代码无法实现预期效果。

原代码问题分析

条件判断错误：原代码中{%if id == 'video_url' %}的id变量未定义，无法触发正确的分支逻辑。
Youtube视频渲染错误：直接用<video>标签加载Youtube链接无效，Youtube不支持直接提供MP4源，必须用iframe嵌入。
默认值处理不当：默认提示文本会被误判为有效链接，导致错误渲染。

修正后的代码实现

1. 调整Schema字段（优化默认值）

{
  "type": "video_url",
  "id": "video_url",
  "default": "",
  "label": "Youtube视频链接",
  "info": "上传Youtube视频到Shopify后粘贴链接",
  "accept": ["youtube"]
},
{
  "type": "text",
  "id": "video_urlt",
  "default": "",
  "label": "自定义上传视频链接",
  "info": "上传视频到Shopify文件库后粘贴链接"
}

2. 前端模板逻辑修正

{% comment %} 优先判断Youtube视频是否有有效链接 {% endcomment %}
{% if section.settings.video_url %}
  <iframe 
    style="max-width: 100%; height: 100%;"
    src="{{ section.settings.video_url | replace: 'watch?v=', 'embed/' }}" 
    frameborder="0" 
    autoplay 
    loop 
    muted 
    webkit-playsinline 
    playsinline 
    allowfullscreen>
  </iframe>
{% comment %} 若无Youtube链接，判断自定义上传视频是否有效 {% endcomment %}
{% elsif section.settings.video_urlt %}
  <video 
    style="max-width: 100%; height: 100%;" 
    autoplay 
    loop 
    muted 
    webkit-playsinline 
    playsinline 
    controls>
    <source src="{{ section.settings.video_urlt }}" type="video/mp4"/>
  </video>
{% endif %}