Hello Mate
I have made a custom section in which we can upload the video for desktop and mobile separately, also can adjust video sizes.
Steps:
- Online Store
- Edit Code
- Under section, create a new section with any name you want
- Paste the below code
{%- unless section.settings.full_width -%}
{%- render 'section-spacing-collapsing' -%}
{%- endunless -%}
{%- capture class -%}content-over-media {% if section.settings.video_size != 'auto' %}content-over-media--{{ section.settings.video_size }}{% endif %} {% if section.settings.full_width %}full-bleed{% else %}shadow-block rounded-lg{% endif %}{%- endcapture -%}
{%- capture poster -%}
{%- assign poster_image = section.settings.poster | default: section.settings.video.preview_image -%}
{%- if section.settings.autoplay == false and poster_image != blank -%}
{%- capture sizes -%}{% if section.settings.full_width %}100vw{% else %}(max-width: 740px) calc(100vw - 40px), (max-width: 999px) calc(100vw - 64px), min({{ settings.page_width }}px, 100vw - 96px){% endif %}{%- endcapture -%}
{{- poster_image | image_url: width: poster_image.width | image_tag: loading: 'lazy', sizes: sizes, widths: '200,300,400,500,600,700,800,900,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200' -}}
{%- endif -%}
{%- endcapture -%}
{%- if section.settings.desktop_video or section.settings.mobile_video -%}
{%- capture desktop_video_class -%}
{%- if section.settings.desktop_video_size != 'auto' -%}
content-over-media--{{ section.settings.desktop_video_size }}
{%- endif -%}
{%- endcapture -%}
{%- capture mobile_video_class -%}
{%- if section.settings.mobile_video_size != 'auto' -%}
content-over-media--{{ section.settings.mobile_video_size }}
{%- endif -%}
{%- endcapture -%}
{%- else -%}
{%- endif -%}
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'play' -%}
{%- unless section.settings.autoplay -%}
{%- endunless -%}
{%- when 'subheading' -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text | escape }}
{%- endif -%}
{%- when 'heading' -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text | escape }}
{%- endif -%}
{%- when 'richtext' -%}
{%- if block.settings.content != blank -%}
{{- block.settings.content -}}
{%- endif -%}
{%- when 'button' -%}
{%- if block.settings.text != blank -%}
{% render 'button', content: block.settings.text, href: block.settings.url, size: block.settings.size, style: block.settings.style, background: block.settings.background, text_color: block.settings.text_color, block: block %}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- endif -%}
{% schema %}
{
"name": "Adi Video",
"class": "shopify-section--video",
"tag": "section",
"disabled_on": {
"groups": ["header", "custom.overlay"]
},
"settings": [
{
"type": "paragraph",
"content": "For best visual results and avoid platform branding, use a MP4 file."
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full width",
"default": true
},
{
"type": "checkbox",
"id": "allow_transparent_header",
"label": "Allow transparent header",
"info": "This setting only applies when this section is the first one.",
"default": false
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay",
"info": "Video are muted to allow autoplay. For best results, do not add any content on top of the video when autoplay is enabled.",
"default": false
},
{
"type": "select",
"id": "desktop_video_size",
"label": "Desktop Video Size",
"options": [
{
"value": "auto",
"label": "16/9 (recommended)"
},
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "auto"
},
{
"type": "select",
"id": "mobile_video_size",
"label": "Mobile Video Size",
"options": [
{
"value": "auto",
"label": "16/9 (recommended)"
},
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "auto"
},
{
"type": "video",
"id": "desktop_video",
"label": "Desktop Video",
"info": "Replaces external video if both are set."
},
{
"type": "video",
"id": "mobile_video",
"label": "Mobile Video",
"info": "Replaces external video if both are set."
},
{
"type": "video_url",
"id": "external_video_url",
"accept": ["vimeo", "youtube"],
"label": "Video URL",
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
},
{
"type": "image_picker",
"id": "poster",
"label": "Poster image",
"info": "3200 x 1600px .jpg recommended. Poster is not visible when autoplay is enabled."
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"default": 30
}
],
"blocks": [
{
"type": "play",
"name": "Play button",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Play button is hidden when autoplay is enabled."
}
]
},
{
"type": "subheading",
"name": "Subheading",
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Subheading"
}
]
},
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Heading"
},
{
"type": "select",
"id": "heading_tag",
"label": "Style",
"options": [
{
"value": "h0",
"label": "H0"
},
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "h5",
"label": "H5"
},
{
"value": "h6",
"label": "H6"
}
],
"default": "h1"
}
]
},
{
"name": "Paragraph",
"type": "richtext",
"settings": [
{
"type": "richtext",
"id": "content",
"label": "Content",
"default": "
Use video to showcase product features or to create a unique atmosphere on your store.
"
}
]
},
{
"type": "button",
"name": "Button",
"settings": [
{
"type": "select",
"id": "style",
"label": "Style",
"options": [
{
"value": "outline",
"label": "Outline"
},
{
"value": "fill",
"label": "Fill"
}
],
"default": "outline"
},
{
"type": "select",
"id": "size",
"label": "Size",
"options": [
{
"value": "sm",
"label": "Small"
},
{
"value": "base",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
},
{
"value": "xl",
"label": "X-Large"
}
],
"default": "lg"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Button text"
},
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "color",
"id": "background",
"label": "Background"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": "Video",
"blocks": [
{
"type": "play"
},
{
"type": "heading",
"settings": {
"text": "Video"
}
}
]
}
]
}
{% endschema %}
