部分未显示 Youtube URL

Question

我对 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>

Answer 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 %}

您可以在 Shopify 文档 HERE 上查看更多关于 video_url 的信息