Skip to content

Instantly share code, notes, and snippets.

@shopifypartners
Last active February 16, 2023 11:24
Show Gist options
  • Save shopifypartners/4836c164bc068caac07c0eeeccc6b169 to your computer and use it in GitHub Desktop.
Save shopifypartners/4836c164bc068caac07c0eeeccc6b169 to your computer and use it in GitHub Desktop.
Example of a Shopify theme section displaying an externally hosted video
<div class="video-section">
<h2>{{ section.settings.heading }}</h2>
{%- if section.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}" class="youtube" allow="autoplay; encrypted-media" title="{{ section.settings.description | escape }}"></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="vimeo" allow="autoplay; encrypted-media" title="{{ section.settings.description | escape }}"></iframe>
{%- endif -%}
</div>
{% schema %}
{
"name": "Video",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Video section heading",
"default": "Title"
},
{
"type": "video_url",
"id": "video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"label": "URL",
"info": "Video plays in the page."
},
{
"type": "text",
"id": "description",
"label": "Video alt text",
"info": "Describe the video for customers using screen readers."
}
],
"presets": [
{
"name": "Video by URL"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment