Is there any way to have a section with multiple embedded Youtube videos in Origin Theme? Slideshow block only does photos, multicolumn or row wont allow embedded code, and video blocks only allow one video. We’d like to show 2-3 videos lined up next to eachother in a gallery.
Thansk
Hi @Shredventure Just follow below steps-
Go to Online Store
Edit Code
Section > create new section > give the name like “video-gallery”
Paste below code and Save
##
{{ section.settings.title }}
{{ section.settings.subheading }}
{% for block in section.blocks %}
{{ block.settings.html }}
{% endfor %}
{% schema %}
{
"name": "Gallery App",
"settings": [
{
"type": "text",
"id": "title",
"label": "Enter Title"
},
{
"type": "range",
"id": "title-font-size",
"label": "Title Font Size",
"min": 22,
"max": 72,
"default": 22,
"step": 2,
"unit": "px"
},
{
"type": "richtext",
"id": "subheading",
"label": "Enter Sub Title or Description"
},
{
"type": "range",
"id": "subheading-font-size",
"label": "Subheading Font Size",
"min": 16,
"max": 22,
"default": 16,
"step": 2,
"unit": "px"
},
{
"type": "select",
"id": "alignment",
"label": "Select Text Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "range",
"id": "desktop_video_row",
"label": "Show Videos Per Row",
"min": 2,
"max": 6,
"default": 3,
"step": 1
},
{
"type": "range",
"id": "gap-video",
"label": "Gap Between Videos",
"min": 10,
"max": 50,
"default": 10,
"step": 1,
"unit": "px"
}
],
"blocks":[
{
"name": "Add Video",
"type": "video",
"settings": [
{
"type": "html",
"id": "html",
"label": "Add Video to Gallery"
}
]
}
],
"presets": [
{
"name": "Video Gallery"
}
]
}
{% endschema %}
5. Go to customization > Add Section > Choose Video Gallery section > now you can paste embed code of youtube.
Please like and mark as solve!
Thank you Sandy! This was very helpful.
I have Dawn Theme and I wish to create a Video Gallery with the possibility to upload my own videos through Shopify (without using embedded Youtube video to be clear).
Do you have a code for that?
Thank you in advance!
Hi, Sandy.
It shows that.
@martinafainozzi Sorry for the late reply, below is the code for your requirement-
##
{{ section.settings.title }}
{{ section.settings.subheading }}
{% for block in section.blocks %}
{% case block.type %}
{% when 'video' %}
{{ block.settings.video_url | video_tag: controls: true, width: '100%' }}
{% endcase %}
{% endfor %}
{% schema %}
{
"name": "Gallery App",
"settings": [
{
"type": "text",
"id": "title",
"label": "Enter Title"
},
{
"type": "range",
"id": "title-font-size",
"label": "Title Font Size",
"min": 22,
"max": 72,
"default": 22,
"step": 2,
"unit": "px"
},
{
"type": "richtext",
"id": "subheading",
"label": "Enter Sub Title or Description"
},
{
"type": "range",
"id": "subheading-font-size",
"label": "Subheading Font Size",
"min": 16,
"max": 22,
"default": 16,
"step": 2,
"unit": "px"
},
{
"type": "select",
"id": "alignment",
"label": "Select Text Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "range",
"id": "desktop_video_row",
"label": "Show Videos Per Row",
"min": 2,
"max": 6,
"default": 3,
"step": 1
},
{
"type": "range",
"id": "gap-video",
"label": "Gap Between Videos",
"min": 10,
"max": 50,
"default": 10,
"step": 1,
"unit": "px"
}
],
"blocks":[
{
"name": "Add Video",
"type": "video",
"settings": [
{
"type": "video",
"id": "video_url",
"label": "Add Video to Gallery"
}
]
}
],
"presets": [
{
"name": "Video Gallery"
}
]
}
{% endschema %}
Please let me know if you need any help!
Hi @Cherry3427 Please use the below code -
##
{{ section.settings.title }}
{{ section.settings.subheading }}
{% for block in section.blocks %}
{% if block.settings.video_url contains 'youtube' %}
<iframe width="{{ block.settings.width }}px" height="{{ block.settings.height }}px" src="{{ block.settings.video_url | replace: 'watch?v=', 'embed/' }}?autoplay={{ block.settings.autoplay }}&muted={{ block.settings.autoplay }}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
{% elsif block.settings.video_url contains 'vimeo' %}
<iframe src="https://player.vimeo.com/video/{{ block.settings.video_url }}" width="{{ block.settings.width }}px" height="{{ block.settings.height }}px" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Video Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Enter Title"
},
{
"type": "range",
"id": "title-font-size",
"label": "Title Font Size",
"min": 22,
"max": 72,
"default": 22,
"step": 2,
"unit": "px"
},
{
"type": "richtext",
"id": "subheading",
"label": "Enter Sub Title or Description"
},
{
"type": "range",
"id": "subheading-font-size",
"label": "Subheading Font Size",
"min": 16,
"max": 22,
"default": 16,
"step": 2,
"unit": "px"
},
{
"type": "select",
"id": "alignment",
"label": "Select Text Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "range",
"id": "desktop_video_row",
"label": "Show Videos Per Row",
"min": 2,
"max": 6,
"default": 3,
"step": 1
},
{
"type": "range",
"id": "gap-video",
"label": "Gap Between Videos",
"min": 10,
"max": 50,
"default": 10,
"step": 1,
"unit": "px"
}
],
"blocks":[
{
"name": "Add Video",
"type": "video",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "Add Video to Gallery",
"accept": [
"vimeo",
"youtube"
]
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay & Muted"
},
{
"type": "text",
"id": "width",
"label": "Video Width"
},
{
"type": "text",
"id": "height",
"label": "Video Height"
}
]
}
],
"presets": [
{
"name": "In Video Gallery"
}
]
}
{% endschema %}
Please let me know and mark as solution!
theme
@Cherry3427 Here it is working, can you please share some screenshot of front-end and backend where did you put this code?
@Cherry3427 Can you please provide your store url so I can check?
Hi, please check it: https://www.hytobp.net/pages/tutorial-video
Thank you.
it works!
Is it possible to have thumbnails of the same size on the mobile phone? Or can stack on mobile?
