'Section not showing Youtube URL

I am very new to Liquid and I am trying to create an option where the user is able to enter a YouTube link and the video is not appearing when entering the link. Currently, I have another video embedded in the schema tag so that the video can appear.

Here is my current code:

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

Here is my code placement of the section:

<div >
    {% section 'EmbedYoutube' %}
</div>
shopifyliquidshopify-templateliquid-layoutliquid-xml


Solution 1:[1]

I think you got the answer for it after make some search into documentation, for future reference you can add the data dynamic like this below code.

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

You can check more regarding the video_url here on Shopify documentation HERE

Solution 2:[2]

Add this code into your section liquid file and you have to enter only after embed code (eg:- J-sUpDMKWbc ) in your inputbox in admin panel

enter image description here

<div>
   <iframe width="420" height="345" src="https://www.youtube.com/embed/{{section.settings.video_url}}">
</iframe>
</div>
{% schema %}
{
    "name": "Embed Youtube",
    "settings": [
        {
            "id": "video_url",
             "type": "text",
            "label": "Video URL",
            "info": "Insert Youtube Embed URL eg:- ZY6RfVY-Zl0"
        }
    ]   
}
{% endschema %}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Onkar
Solution 2 Dotsquares

Related Questions