So I added a new video section to my broadcast theme and I noticed its on loop which is great but it does NOT automatically play. Any work arounds or custom code needed to get it to play automatically as soon as you enter page? THANKS!
Hey @pennyroseopti
Go to shopify admin sales channels and then click on three dots and click edit code then under section directory ad a new section and replace the code of new section with this
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
{%- if block.settings.video_link != blank -%}
{% endif %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
#
{{ block.settings.title | escape }}
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
{% schema %}
{
"name": {
"en": "Video Background"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "range",
"id": "info_top",
"label": {
"en": "Top position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
},
{
"type": "range",
"id": "info_right",
"label": {
"en": "Right position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
},
{
"type": "range",
"id": "info_bottom",
"label": {
"en": "Bottom position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
},
{
"type": "range",
"id": "info_left",
"label": {
"en": "Left position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
}
,{
"type": "url",
"id": "video_link",
"label": {
"en": "Video link"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"en": "Cover image"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "range",
"id": "info_top",
"label": {
"en": "Top position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
},
{
"type": "range",
"id": "info_right",
"label": {
"en": "Right position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
},
{
"type": "range",
"id": "info_bottom",
"label": {
"en": "Bottom position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
},
{
"type": "range",
"id": "info_left",
"label": {
"en": "Left position"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"en": "%"
},
"default": 50
}
,{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background color (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"en": "or use an image (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"en": "Heading"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"en": "Video Background"
},
"category": {
"en": "Main"
},
"blocks": [
{
"type": "video"
}
]
}
]
}
{% endschema %}
Kindly Note that add this section to your store by Theme customizer and add video link from content directory under files folder in shopify admin and click on a video link button and add that link to the desire place Thanks
added new code and video but it’s still not autoplaying. how do I make sure that new code made is being used by website?
Come inbox and shoot out me a message I will solve it by myself Please share store URL I will send you collaborator access