Hi,
I would like to have a video as a website banner. With the theme customizer I can’t manage to get a video in autoloop as background with button and text. Does anyone know how I can get this done?
Thanks in advance!
Shopify store: https://go-smooth.com/
Thanks for your reply.
This is my index__video.liquid code. Or do I need to add a custom HTML code section with a custom code?
{% comment %}
** Video - dynamic **
- Draggable section
{% endcomment %}
{% include 'include-video' %}
{% schema %}
{
"name": "Video",
"class": "video-section jsVideo",
"settings": [
{
"type": "header",
"content": "Video"
},
{
"type": "select",
"id": "aspect_ratio",
"label": "Aspect ratio",
"options": [
{
"value": "16:9",
"label": "16:9"
},
{
"value": "4:3",
"label": "4:3"
}
],
"default": "16:9"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay video",
"info": "Limited browser support for autoplaying video. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/360000661568)",
"default": false
},
{
"type": "checkbox",
"id": "autoloop",
"label": "Autoloop video",
"default": true
},
{
"type": "checkbox",
"id": "mute_video",
"label": "Mute video",
"default": false
},
{
"type": "checkbox",
"id": "controls",
"label": "Show video controls",
"default": true
},
{
"type": "video_url",
"id": "iframe_video",
"label": "YouTube or Vimeo video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=8NxS0vrPcsA"
},
{
"type": "text",
"id": "html5_video",
"label": "HTML5 MP4/OGV File URL"
},
{
"type": "header",
"content": "Content"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 900px recommended"
},
{
"type": "text",
"id": "pretext",
"label": "Preheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured video"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading",
"default": "Embed a Youtube or Vimeo video."
},
{
"type": "color",
"id": "pretext_color",
"label": "Preheading",
"default": "#000000"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000000"
},
{
"type": "select",
"id": "horizontal_text_position",
"label": "Horizontal position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "vertical_text_position",
"label": "Vertical position",
"options": [
{
"value": "start",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "end",
"label": "Bottom"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Play video"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "button--secondary",
"options": [
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
},
{
"value": "button--link-style",
"label": "Link style"
}
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "select",
"id": "overlay_style",
"label": "Overlay style",
"default": "text_only",
"options": [
{
"value": "full",
"label": "Full"
},
{
"value": "text_only",
"label": "Text only"
},
{
"value": "none",
"label": "None"
}
]
},
{
"type": "color",
"id": "video_overlay_color",
"label": "Overlay",
"default": "#ffffff"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"default": 180,
"unit": "deg",
"step": 10
},
{
"type": "range",
"id": "background_opacity",
"label": "Background opacity",
"default": 77,
"min": 0,
"max": 100,
"unit": "%"
},
{
"type": "range",
"id": "text_width",
"label": "Text width",
"min": 40,
"max": 100,
"default": 70,
"unit": "%"
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "checkbox",
"id": "mobile_text_below_video",
"label": "Show text below image",
"default": true
},
{
"type": "color",
"id": "pretext_color_mobile",
"label": "Preheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "heading_color_mobile",
"label": "Heading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "subheading_color_mobile",
"label": "Subheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wide",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"presets": [{
"name": "Video",
"category": "Video",
"settings": {
"autoplay": false,
"iframe_video": "https://www.youtube.com/watch?v=8NxS0vrPcsA",
"button_label": "Play Video"
}
}]
}
{% endschema %}
thanks code can you please share also
{% include ‘include-video’ %}
This is my include-video.liquid code:
{% comment %}
Snippet can be used in section or block
eg. {% include 'include-video' %}
{% endcomment %}
{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{% assign object = block %}
{% else %}
{% assign object = section %}
{% endif %}
{% assign id = object.id %}
{% assign aspect_ratio = object.settings.aspect_ratio %}
{% assign autoplay = object.settings.autoplay %}
{% assign autoloop = object.settings.autoloop %}
{% assign controls = object.settings.controls %}
{% assign image = object.settings.image %}
{% assign overlay_style = object.settings.overlay_style %}
{% assign overlay_color = object.settings.video_overlay_color %}
{% assign background_opacity = object.settings.background_opacity %}
{% assign overlay_background_alpha = background_opacity | divided_by: 100.00 %}
{% assign gradient = object.settings.gradient %}
{% assign gradient_rotation = object.settings.gradient_rotation %}
{% assign horizontal_text_position = object.settings.horizontal_text_position %}
{% assign vertical_text_position = object.settings.vertical_text_position %}
{% assign text_align = object.settings.text_align %}
{% assign pretext = object.settings.pretext %}
{% assign pretext_color = object.settings.pretext_color %}
{% assign title = object.settings.title %}
{% assign title_color = object.settings.heading_color %}
{% assign subtitle = object.settings.subtitle %}
{% assign subtitle_color = object.settings.subheading_color %}
{% assign button_label = object.settings.button_label %}
{% assign button_style = object.settings.button_style %}
{% assign banner_overlay_color = object.settings.banner_overlay_color %}
{% assign text_width = object.settings.text_width %}
{% assign color = object.settings.color %}
{% assign link_color = object.settings.link_color %}
{% comment %} Mobile {% endcomment %}
{% assign mobile_text_below_media = object.settings.mobile_text_below_video %}
{% assign mobile_headline_color = object.settings.heading_color_mobile %}
{% assign mobile_preheading_color = object.settings.pretext_color_mobile %}
{% assign mobile_subtitle_color = object.settings.subheading_color_mobile %}
{% comment %}Layout{% endcomment %}
{% assign width = object.settings.width %}
{% assign padding_top = object.settings.padding_top %}
{% assign padding_bottom = object.settings.padding_bottom %}
{% assign padding_left = object.settings.padding_left %}
{% assign padding_right = object.settings.padding_right %}
{% assign animation = object.settings.animation | default: 'none' %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = object.settings.css_class %}
{% assign custom_css = object.settings.custom_css %}
{% assign iframe_video = object.settings.iframe_video %}
{% assign html5_video = object.settings.html5_video %}
{% if iframe_video != blank or html5_video != blank %}
{% assign video_exists = true %}
{% else %}
{% assign video_exists = false %}
{% endif %}
{% comment %}Is the color set to transparent?{% endcomment %}
{% assign heading_alpha = title_color | color_extract: 'alpha' %}
{% assign preheading_alpha = pretext_color | color_extract: 'alpha' %}
{% assign subheading_alpha = subtitle_color | color_extract: 'alpha' %}
{% assign mobile_headline_alpha = mobile_headline_color | color_extract: 'alpha' %}
{% assign mobile_preheading_alpha = mobile_preheading_color | color_extract: 'alpha' %}
{% assign mobile_subtitle_alpha = mobile_subtitle_color | color_extract: 'alpha' %}
{% assign caption_border_alpha = object.settings.border_color | color_extract: 'alpha' %}
{% comment %} Section specific CSS {% endcomment %}
{%- capture section_css -%}
{% if overlay_style != 'none' %}
.overlay {
background-image: linear-gradient({{ gradient_rotation }}deg, rgba(255,255,255,0), {{ gradient }});
background-color: {{ overlay_color }};
opacity: {{ overlay_background_alpha }};
}
{% endif %}
.video__title {
color: {% if heading_alpha != 0 %}{{ title_color }}{% else %}{{ settings.heading_color }}{% endif %};
}
.video__subtitle {
color: {% if subheading_alpha != 0 %}{{ subtitle_color }}{% else %}{{ settings.heading_color }}{% endif %};
}
.pretext {
color: {% if preheading_alpha != 0 %}{{ pretext_color }}{% else %}{{ settings.heading_color }}{% endif %};
}
.video__text-container .hidden {
display: none;
}
{%- endcapture -%}
{% style %}
{% include 'css-loop', css: section_css, id: id %}
@media only screen and (min-width: 480px) {
#shopify-section-{{ id }} .video__text-wrapper {
width: {{ text_width }}%;
}
}
#shopify-section-{{ id }} {
padding-top: {{ padding_top }}px;
padding-bottom: {{ padding_bottom }}px;
padding-left: {{ padding_left }}px;
padding-right: {{ padding_right }}px;
{% if width == 'wide' %}
width: 100%;
{% elsif width == 'half' %}
width: 50%;
{% endif %}
}
@media only screen and (max-width: 480px) {
#shopify-section-{{ id }} .video__title {
color: {% if mobile_headline_alpha != 0 %}{{ mobile_headline_color}}{% endif %};
}
#shopify-section-{{ id }} .video__subtitle {
color: {% if mobile_subtitle_alpha != 0 %}{{ mobile_subtitle_color}}{% endif %};
}
#shopify-section-{{ id }} .pretext {
color: {% if mobile_preheading_alpha != 0 %}{{ mobile_preheading_color}}{% endif %};
}
}
{% include 'css-loop', css: custom_css, id: id %}
{% endstyle %}
{% comment %} HTML markup {% endcomment %}
Hi @KetanKumar , can you help me fix this problem? I am willing to hire you if needed.