Shopify Liquid Get Video URL From Section Video Input

October 18th, 2023





As with all things Shopify, the video input on a section settings schema is not as straightforward as it probably could be.

If you attempt to just echo out a video input like so:

{{ section.settings.video_input }}

You will end up with something like VideoDrop as your source output.

If you are trying to just output the URL, the docs give some ideas of where to go:

The docs show that the video object has a source property.

The docs show that the video object has a source property.

From here we see that the video object has an array of video_source’s which we can theoretically access.

If you were to use section.settings.video_input.sources[0].url

you would end up with a .m3u8 file which is not likely what you are looking for.

To get the raw url for an mp4 file, use section.settings.video_input.sources[1].url.

The second array source should be an mp4 file rather than an HLS streaming format.

An example of this code would look like this:

<video>
    <source src="{{ section.settings.video_input.sources[1].url }}" type="video/mp4">
</video>

The docs have some info but could definitely use some work.

The docs have some info but could definitely use some work.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *