Hi everyone, the video hero sections isn’t working properly, I upload the video and it doesn’t play on the webpage. I am using the influence theme which is giving me so much trouble as the coding seems to be all messed up, any suggestions on how to go about this, any help is greatly appreciated
1 Like
Can you please share store url and the issue you are facing ?
hi, the issue I am facing is that the video hero on the landing page won’t play on mobile or on pc. On mobile, the section comes up but it is blank and has the generic shopify background on it.
did you embeded the video or upload from your PC. Make sure your video is saved in allowed formats. Check your video format if not is allowed format edit video with android apps like alight motion or videoshow and then upload your video. If still facing issue you can comment
I uploaded the video to files in shopify settings. I then put in the video hero section and copied the link from the files section, once that’s done the picture will
show up on the screen but won’t play on any platform, it more than likely is a coding issue, one I have no idea how to go about without help
Can you please provide screenshot of section settings ?
here is the section code
{% liquid
if section.settings.button_2_link != blank and section.settings.button_2_text != blank
assign button_spacing = ‘mr-3 md:mr-4’
else
assign button_spacing = ‘mr-0’
endif
case section.settings.caption_alignment
when ‘left’
assign caption_align = ‘lg:justify-self-start’
when ‘center’
assign caption_align = ‘lg:justify-self-center’
when ‘right’
assign caption_align = ‘lg:justify-self-end’
endcase
case section.settings.caption_box_size
when ‘small’
assign caption_size = ‘min-h-[145px] lg:min-h-0 lg:min-w-[500px]’
when ‘medium’
assign caption_size = ‘min-h-[175px] lg:min-h-0 lg:min-w-[750px]’
when ‘large’
assign caption_size = ‘min-h-[208px] lg:min-h-0 lg:min-w-[1000px]’
endcase
case section.settings.desktop_height
when ‘s’
assign desktop_height = ‘lg:h-[400px]’
assign iframe_height = 'top-auto lg:h-[300%] lg:top-[-100%] ’
when ‘m’
assign desktop_height = ‘lg:h-[550px]’
assign iframe_height = 'top-auto lg:h-[300%] lg:top-[-100%] ’
when ‘l’
assign desktop_height = ‘lg:h-[750px]’
assign iframe_height = 'top-auto lg:h-[300%] lg:top-[-100%] lg:max-w-none lg:w-[135%] xl:w-[110%] ’
when ‘xl’
assign desktop_height = ‘lg:h-screen’
assign iframe_height = 'top-auto lg:h-[300%] lg:top-[-100%] lg:left-[-35%] lg:max-w-none lg:w-[165%] xl:w-[145%] xl:left-[-25%] ’
endcase
case section.settings.mobile_height
when ‘s’
assign mobile_height = 'h-[350px] ’
assign iframe_width = ‘max-w-none w-[300%] h-[110%] top-[-5%] left-[-100%] md:w-full md:left-auto md:h-[200%] md:top-[-50%]’
when ‘m’
assign mobile_height = 'h-[400px] ’
assign iframe_width = ‘max-w-none w-[300%] h-[110%] top-[-5%] left-[-100%] md:w-full md:left-auto md:h-[200%] md:top-[-50%]’
when ‘l’
assign mobile_height = 'h-[500px] ’
assign iframe_width = ‘max-w-none w-[300%] left-[-100%] md:w-[120%] md:h-[120%] md:top-[-10%] md:left-[-10%]’
when ‘xl’
assign mobile_height = 'h-screen ’
assign iframe_width = ‘max-w-none w-[400%] md:max-w-full md:w-full left-[-150%] md:left-auto’
endcase
assign section_heights = mobile_height | append: desktop_height
assign buttons_enabled = false
if section.settings.button_1_link != blank and section.settings.button_1_text != blank
assign buttons_enabled = true
endif
if section.settings.button_2_link != blank and section.settings.button_2_text != blank
assign buttons_enabled = true
endif
assign video_classes = 'col-start-1 col-end-2 row-start-1 row-end-2 ’ | append: section_heights
assign iframe_classes = iframe_height | append: iframe_width
assign button_classes = section_heights
assign image_classes = 'object-cover w-full ’ | append: section_heights
%}
{% if section.settings.section_heading != blank %}
{% render 'armament-heading' with heading_content: section.settings.section_heading, tag: 'h3', heading_type: 'heading-3', classes: 'text-center', data_aid: 'video-hero-heading' %}
{% endif %}
{% endif %}
{% if buttons_enabled %}
{% if section.settings.button_1_link != blank and section.settings.button_1_text != blank %}
{% render 'armament-button' with url: section.settings.button_1_link, content: section.settings.button_1_text, style: section.settings.button_1_style, classes: button_spacing, data_aid: "button-1" %}
{% endif %}
{% endif %}
{% if section.settings.button_2_link != blank and section.settings.button_2_text != blank %}
{% render ‘armament-button’ with url: section.settings.button_2_link, content: section.settings.button_2_text, style: section.settings.button_2_style, data_aid: “button-2” %}
{% endif %}
{% schema %}
{
“name”: “Video hero”,
“settings”: [
{
“type”: “text”,
“id”: “video_url”,
“label”: “Video link”,
“info”: “Accepts YouTube, Vimeo and MP4. Video will be muted and some devices may prevent autoplay.”,
“default”: “https://www.youtube.com/watch?v=_9VUPq3SxOc”
},
{
“type”: “image_picker”,
“id”: “fallback_image”,
“label”: “Fallback image”,
“info”: “Will display if the video fails to load”
},
{
“type”: “select”,
“id”: “desktop_height”,
“label”: “Desktop height”,
“options”: [
{
“value”: “s”,
“label”: “Small”
},
{
“value”: “m”,
“label”: “Medium”
},
{
“value”: “l”,
“label”: “Large”
},
{
“value”: “xl”,
“label”: “Crop to fit screen”
}
],
“default”: “l”
},
{
“type”: “select”,
“id”: “mobile_height”,
“label”: “Mobile height”,
“options”: [
{
“value”: “s”,
“label”: “Small”
},
{
“value”: “m”,
“label”: “Medium”
},
{
“value”: “l”,
“label”: “Large”
},
{
“value”: “xl”,
“label”: “Crop to fit screen”
}
],
“default”: “m”
},
{
“type”: “header”,
“content”: “Overlay content”
},
{
“type”: “textarea”,
“id”: “section_heading”,
“label”: “Heading”,
“default”: “Bring your page to life”
},
{
“type”: “select”,
“id”: “caption_alignment”,
“label”: “Content position (desktop)”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “left”
},
{
“type”: “select”,
“id”: “caption_box_size”,
“label”: “Caption box size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “small”
},
{
“type”: “select”,
“id”: “section_color_scheme”,
“label”: “Color scheme”,
“options”: [
{
“value”: “general”,
“label”: “General”
},
{
“value”: “accent-1”,
“label”: “Accent 1”
},
{
“value”: “accent-2”,
“label”: “Accent 2”
},
{
“value”: “accent-3”,
“label”: “Accent 3”
}
],
“default”: “general”
},
{
“type”: “url”,
“id”: “button_1_link”,
“label”: “First button link”,
“default”: “/collections/all”
},
{
“type”: “text”,
“id”: “button_1_text”,
“label”: “First button label”,
“default”: “Shop now”
},
{
“type”: “radio”,
“id”: “button_1_style”,
“label”: “First button style”,
“options”: [
{
“value”: “outline”,
“label”: “Outline”
},
{
“value”: “fill”,
“label”: “Fill”
}
],
“default”: “outline”
},
{
“type”: “url”,
“id”: “button_2_link”,
“label”: “Second button link”,
“default”: “/”
},
{
“type”: “text”,
“id”: “button_2_text”,
“label”: “Second button label”,
“default”: “Learn more”
},
{
“type”: “radio”,
“id”: “button_2_style”,
“label”: “Second button style”,
“options”: [
{
“value”: “outline”,
“label”: “Outline”
},
{
“value”: “fill”,
“label”: “Fill”
}
],
“default”: “fill”
}
],
“presets”: [
{
“name”: “Video hero”,
“settings”: {
}
}
]
}
{% endschema %}
There is a snippet armament-video called there which is responsible to render video, please check there and try youtube/vimeo link, It may be the case that it does not support mp4
Hi, I am experiencing the same issue - my video hero is not playing on mobile. Could you please advise?
1 Like