0

我对 Liquid 很陌生，我正在尝试创建一个选项，用户可以在其中输入 YouTube 链接，并且在输入链接时视频没有出现。目前，我在架构标签中嵌入了另一个视频，以便可以显示该视频。

这是我当前的代码：

<div>
    <div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
        <iframe src="https://www.youtube.com/embed/J-sUpDMKWbc?rel=0&amp;controls=1&amp;autoplay=0&amp;mute=0&amp;start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
        </iframe>
    </div>
</div>
{% schema %}
{
    "name": "Embed Youtube",
    "settings": [
        {
            "id": "video_url",
            "type": "video_url",
            "label": "Video URL",
            "accept": ["youtube", "vimeo"],
            "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
            "info": "Insert Youtube URL",
            "placeholder": "text"
        }
    ]   
}
{% endschema %}

这是我对该部分的代码放置：

<div >
    {% section 'EmbedYoutube' %}
</div>
4

1 回答 1

1

我认为您在对文档进行一些搜索后得到了答案，以供将来参考，您可以像下面的代码一样添加数据动态。

 <div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/{{section.settings.video_url.id}}?rel=0&amp;controls=1&amp;autoplay=0&amp;mute=0&amp;start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
          </iframe>
</div>
</div>
{% schema %}
  {
    "name": "Embed Youtube",
    "settings": [
    {
  "id": "video_url",
  "type": "video_url",
  "label": "Video URL",
  "accept": ["youtube", "vimeo"],
  "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
  "info": "Insert Youtube URL",
  "placeholder": "text"
}
    ]
    
  }
{% endschema %}

您可以在此处video_url查看有关 Shopify 文档的更多信息。

于 2021-02-28T07:29:59.933 回答