部分未显示 Youtube URL

如何解决部分未显示 Youtube URL

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

解决方法

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

 <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 的更多信息