skip to Main Content

In Shopify liquid, I am trying to render a video block from a section.

I have my own wrapped, so I simply want to get a raw URL; but nothing seems to work.
This won’t return a proper url:

<video class="video" loop muted autoplay playsinline>
  <source src="{{ block.settings.video | file_url }}" type="video/mp4">
</video>

And this will create a whole video HTML element, that I don’t want:

{{ block.settings.video | media_tag }}

Here is the schema for this field:

  {
    "name": "Video",
    "type": "video",
    "settings": [
      {
        "type": "video",
        "id": "video",
        "label": "Video"
      }
    ]
  }

Does someone know how can I get an url only?

Thanks,

2

Answers


  1. Okay, here you can see the video input type into Shopify documentation Link
    enter image description here
    enter image description here

    You can see it returns the video object or null if no video is selected.

    In video object the following data is associated:
    enter image description here

    Here into video sources
    enter image description here

    You can see the URL params to return the URL, so you need to get this URL like, sources return array of URL type so access specific URL like this

    {{block.settings.video.sources[0].url}}
    
    Login or Signup to reply.
  2. Also you can create a section with video picker

    {% schema %}{
      "name": "Video",
      "class": "video-section",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "A Shopify-hosted video"
        }
      ],
      "presets": [
        {
          "name": "Video"
        }
      ]
    }
    {% endschema %}
    {% if section.settings.video != blank %}
          <video src="{{section.settings.video.sources[1].url}}" loop muted playsinline autoplay></video>
        {% endif %}
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search