Shopify Theme Customization with Liquid by Ivan Djordjevic

Author:Ivan Djordjevic [Ivan Djordjevic]
Language: eng
Format: epub
Publisher: Packt Publishing
Published: 2021-10-28T16:00:00+00:00

Using the host attribute in combination with an if statement, we can easily distinguish the two iframe elements and apply the appropriate attributes to each of them:

{% assign product_object = all_products["gardening-gloves"] %}

{% for media in product_object.media %}

{% case media.media_type %}

{% when "image" %}

{{ media | img_tag: media.alt, "class1 class2", "300x300" }}

{% when "external_video" %}

{% if media.host == "youtube" %}

{{ media | external_video_url: controls: 0, color: "white" | external_video_tag }}

{% else %}

{{ media | external_video_url: loop: 1, muted: 1 | external_video_tag }}

{% endif %}

{% when "video" %}

{% when "model" %}

{% else %}

{% endcase %}

{% endfor %}

With the introduction of the host attribute, we have ensured that each type of external video embedding will receive the appropriate attributes based on its documentation.

Tip:

For available attributes for YouTube videos, refer to https://developers.google.com/youtube/player_parameters#Parameters.

For available attributes for Vimeo videos, refer to https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters.

We have now learned how to include both types of external videos and include any attributes for each type. Now we can move on to the following switch statement and learn how to output a video hosted on the Shopify platform itself.

Uploading a video as a product media asset is the same as uploading an image. To upload a video, click on the Products section within the admin sidebar and select the product for which we are uploading the video asset. Once inside, scroll down to the Media section and click on the Add Media button to start the uploading process.

Important note:

Aside from external videos, uploading assets to the Shopify platform has specific limitations for all assets, including images and videos. Besides the specific types of formats that we can use, an image file cannot exceed the resolution of 20 MP, 20 MB in size, and must be in either .jpeg or .png format, whereas video files are limited to a maximum length of 60 seconds, 20 MB in size, and must be in either .mp4 or .mov video format.

Once we have uploaded the video, we can also add optional information by including alt text and a poster image in the same way as for external media.

To output the video uploaded to product media files, we will need to use video_tag, accessible through the video object:

{% assign product_object = all_products["gardening-gloves"] %}

{% for media in product_object.media %}

{% case media.media_type %}

{% when "image" %}

{{ media | img_tag: media.alt, "class1 class2", "300x300" }}

{% when "external_video" %}

{% if media.host == "youtube" %}

{{ media | external_video_url: controls: 0, color: "white" | external_video_tag }}

{% else %}

{{ media | external_video_url: loop: 1, muted: 1 | external_video_tag }}

{% endif %}

{% when "video" %}

{{ media | video_tag }}

{% when "model" %}

{% else %}

{% endcase %}

{% endfor %}

By previewing the Product Gallery page, we will notice that in the place where the video should be, we only have a static image, a relatively small static image. If we inspect the results we have received, we will notice that we have correctly generated the HTML video tag.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.