A user working with Shopify’s Dawn theme seeks help creating a full-width video banner similar to eluzo.co’s design. They want the video to maintain proper aspect ratios on both mobile and desktop, autoplay muted without controls, and include overlay text with a call-to-action button.
Progress made:
Remaining challenges:
The helper (Shadab_dev) provided CSS snippets and modified Liquid code throughout the thread. They indicated that the remaining customizations (text overlay, buttons, and ensuring responsive design) require more extensive custom coding and offered to continue via direct collaboration with store access. The discussion remains open with partial implementation complete.
Dawn theme
I am trying to get a video that fits my frontpage of my website I am inspiring from this website https://eluzo.co
I want the video on Mobile to be this same ratio adv the video to also be like flush for desktop also to have autoplay be muted and no controls. I will also like to have my header and a fuction to shop now but unfortunately when I make a video it looks like this. It looks awful
I believe it’s possible with some css to let video take the entire width and height of the screen. Eluzo uses a text banner which allows for a background image, that can be done as well.
And for the video to autoplay and other settings you will need to edit the video tag in liquid that rendering the video on the page.
So in short it will require theme code modifications. Aint that advanced stuff but you need to change stuff at the right places
Do you know how I can do it? 
Share your url and will try to do amap in my knowledge from the chrome developer tools.
Lexxyy.com thank you so much
I believe you removed the video banner. Duplicate your theme and add the video banner on it and send me the preview link for the duplicate theme.
Here you go https://wzebp42ne2cpo55i-67541336316.shopifypreview.com
thanks again
Hey if you check the customizer for the video section and set the padding to 0. If you dont get that, open base.css file and add this at the very bottom
section-template–18901572550908__video_YPUB7A-padding{
padding: 0;
}
Ok thanks for the help! Completely forgot about that but is there anyway I can make the video the same length and height as Eluzo and give it buttons I would like to make a similar header also make it autoplay and give to the customer no controls no pause it
Yes the width and height I can check in the reference and share the code with you. For video to be autoplay with no controls I will need you to give me code for the entire video section file you will have to add attributes to your video tag. And to add buttons oany other info if the theme doesn’t allow you that you will need to add it with custom coding.
{{ ‘video-section.css’ | asset_url | stylesheet_tag }}
{{ ‘component-deferred-media.css’ | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign video_id = section.settings.video.id | default: section.settings.video_url.id
assign video_alt = section.settings.video.alt | default: section.settings.description
assign alt = ‘sections.video.load_video’ | t: description: video_alt | escape
assign poster = section.settings.video.preview_image | default: section.settings.cover_image
if section.settings.video != null
assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
if ratio_diff < 0.01 and ratio_diff > 0
assign fix_ratio = true
endif
endif
-%}
{%- capture sizes -%}
{% if section.settings.full_width -%}
100vw
{%- else -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
calc(100vw - 10rem), 100vw
{%- endif %}
{%- endcapture -%}
{% schema %}
{
“name”: “t:sections.video.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “t:sections.video.settings.heading.default”,
“label”: “t:sections.video.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “t:sections.video.settings.enable_video_looping.label”,
“default”: false
},
{
“type”: “video”,
“id”: “video”,
“label”: “t:sections.video.settings.video.label”
},
{
“type”: “video_url”,
“id”: “video_url”,
“accept”: [“youtube”, “vimeo”],
“default”: “https://www.youtube.com/watch?v=_9VUPq3SxOc”,
“label”: “t:sections.video.settings.video_url.label”,
“info”: “t:sections.video.settings.video_url.info”
},
{
“type”: “image_picker”,
“id”: “cover_image”,
“label”: “t:sections.video.settings.cover_image.label”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“label”: “t:sections.video.settings.full_width.label”,
“default”: false
}
],
“presets”: [
{
“name”: “t:sections.video.presets.name”
}
]
}
{% endschema %}
thank you once again!
Add this code for the video height in base.css file at the very last
deferred-media.video-section__media{
height: 378px;
padding-bottom: inherit;
}
It worked perfectly thank you! Now all I’m missing is the buttons and the autoplay can’t wait to see how this turns out!
Replace the entire code file with this
{{ ‘video-section.css’ | asset_url | stylesheet_tag }}
{{ ‘component-deferred-media.css’ | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign video_id = section.settings.video.id | default: section.settings.video_url.id
assign video_alt = section.settings.video.alt | default: section.settings.description
assign alt = ‘sections.video.load_video’ | t: description: video_alt | escape
assign poster = section.settings.video.preview_image | default: section.settings.cover_image
if section.settings.video != null
assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
if ratio_diff < 0.01 and ratio_diff > 0
assign fix_ratio = true
endif
endif
-%}
{%- capture sizes -%}
{% if section.settings.full_width -%}
100vw
{%- else -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
calc(100vw - 10rem), 100vw
{%- endif %}
{%- endcapture -%}
{{
section.settings.video
| video_tag:
image_size: ‘1100x’,
autoplay: true,
loop: section.settings.enable_video_looping,
controls: false,
muted: false,
poster: true
}}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.video.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “t:sections.video.settings.heading.default”,
“label”: “t:sections.video.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “t:sections.video.settings.enable_video_looping.label”,
“default”: false
},
{
“type”: “video”,
“id”: “video”,
“label”: “t:sections.video.settings.video.label”
},
{
“type”: “video_url”,
“id”: “video_url”,
“accept”: [“youtube”, “vimeo”],
“default”: “https://www.youtube.com/watch?v=_9VUPq3SxOc”,
“label”: “t:sections.video.settings.video_url.label”,
“info”: “t:sections.video.settings.video_url.info”
},
{
“type”: “image_picker”,
“id”: “cover_image”,
“label”: “t:sections.video.settings.cover_image.label”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“label”: “t:sections.video.settings.full_width.label”,
“default”: false
}
],
“presets”: [
{
“name”: “t:sections.video.presets.name”
}
]
}
{% endschema %}
Try this, this should probably autoplay. if it does not just try changing the value of muted to true.
It looks amazinggg! Anyway to make it not to give it an option to press play?And for the text like Eluzo has “stand out from the rest” and shop now I am still not sure how? If not no sweat thanks so much!
Hey i just saw the height thing is not taking effect. Just add this on the same code as before, i have revised it
deferred-media.video-section__media{
height: 378px;
padding-bottom: inherit !important;
}
This is what i will be able to help from here. The other requirements are doable as well and not that advanced but they will need custom code, to add the texts and buttons then to style them with css and also make sure they are responsive on other screen sizes.
To add/edit code i will need collab access to the store, please reach out via personal links below for a convenient convo and collab for further needs.
Best
Shadab Ali
