hello, can someone give me code to have a full width video with text overlay and a button? I am using craft theme
my site is www.royalsurge.shop
Any help is appreciated thanks!
1 Like
HI @royalsurge
To make the video banner section, it requires to add code into your theme, so in this case if you don’t know the code, you should hire an expert, they can help you build that section.
yes, please check your theme customization section may allow this if doesn’t there let me know it can be done some customization code
Hi @royalsurge
We’re happy to support you, but can you provide us with detailed information (description, screenshots) about your current issue and what you want it to be like? Then, we will check it and suggest you a solution if possible.
Hi @royalsurge
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Sections/base.css
- Add a new section → video-with-text
- Open Sections/video-with-text.liquid
- replace content with code below
{{ 'component-image-with-text.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 -%}
{%- if section.settings.image != blank -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
##
{{ block.settings.heading | escape }}
{%- when 'caption' -%}
{{ block.settings.caption | escape }}
{%- when 'text' -%}
{{ block.settings.text }}
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
{% schema %}
{
"name": "Video with text",
"class": "section",
"settings": [
{
"type": "text",
"id": "image",
"label": "Video"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
},
{
"type": "header",
"content": "Mobile layout"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
}
],
"default": "left",
"label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-with-text.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image with text",
"label": "t:sections.image-with-text.blocks.heading.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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.image-with-text.blocks.caption.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "t:sections.image-with-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-with-text.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "
Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
",
"label": "t:sections.image-with-text.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
}
],
"default": "body",
"label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
}
]
},
{
"type": "button",
"name": "t:sections.image-with-text.blocks.button.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
"info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
}
]
}
],
"presets": [
{
"name": "Video with text",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}
- Go to Customize → add Video width text
Hope can help
If you find my reply helpful, please hit Like and Mark as Solution
EBOOST
2 Likes
Thank you so much for this code!! It worked for my website! Thank you! However, when I use it, my video isn’t full screen, but there is padding on the sides. Is there a way to make this go from edge to edge on my screen?
Thank you again!
Hi
Thank you so much for the code. Worked pretty well for me albeit a small issue. The video doesn’t stretch across the full screen width even after I added
width: 100%;
height: auto;
after
.video-with-text .image-with-text__media video{
position: static!important;
With this LINK you can access page preview. Appreciate your help to get the video full width and responsive to screen size.
Also, how can the text and button be aligned to the bottom left corner of the video?
Many thanks
Hello, he’s trying to say that the video section isn’t full width. I attached a photo (I covered the video) but I highlighted with red the margins.
I used width: 100%;
height: auto; but isn’t working. Do you know how could we make it full width ?
This code should work to make it full width.
{{ ‘component-image-with-text.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;
padding-left: {{ section.settings.padding_top | times: 0 | round: 0 }}px;
padding-right: {{ section.settings.padding_top | times: 0 | round: 0 }}px;
}
@media screen and (min-width: 1000px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
.video-with-text .image-with-text__media video{ position: static!important; width: 100%; height: auto;} .video-with-text .grid__item { width: 100%; max-width: 150%; } .image-with-text.video-with-text .image-with-text__text-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-with-text.video-with-text .image-with-text__content { background: rgba(0,0,0,0.5); color: #fff; } .image-with-text.video-with-text .image-with-text__content h2 { color: #fff;} .image-with-text.video-with-text .grid { position: relative; }
<div class="image-with-text__media gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if section.settings.image != blank -%}
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
{{ block.settings.heading | escape }}
{%- when 'caption' -%}{{ block.settings.caption | escape }}
{%- when 'text' -%}{{ block.settings.text }}
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label | escape }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
“name”: “Video with text”,
“class”: “section”,
“settings”: [
{
“type”: “text”,
“id”: “image”,
“label”: “Video”
},
{
“type”: “select”,
“id”: “desktop_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.options__3.label”
}
],
“default”: “left”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.label”
},
{
“type”: “header”,
“content”: “Mobile layout”
},
{
“type”: “select”,
“id”: “mobile_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.options__3.label”
}
],
“default”: “left”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.image-with-text.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Image with text”,
“label”: “t:sections.image-with-text.blocks.heading.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”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
}
]
},
{
“type”: “caption”,
“name”: “t:sections.image-with-text.blocks.caption.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “caption”,
“default”: “Add a tagline”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “subtitle”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label”
},
{
“value”: “caption-with-letter-spacing”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label”
}
],
“default”: “caption-with-letter-spacing”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text_style.label”
},
{
“type”: “select”,
“id”: “text_size”,
“options”: [
{
“value”: “small”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label”
},
{
“value”: “medium”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label”
},
{
“value”: “large”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label”
}
],
“default”: “medium”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.label”
}
]
},
{
“type”: “text”,
“name”: “t:sections.image-with-text.blocks.text.name”,
“limit”: 1,
“settings”: [
{
“type”: “richtext”,
“id”: “text”,
“default”: “
Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
”,“label”: “t:sections.image-with-text.blocks.text.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “body”,
“label”: “t:sections.image-with-text.blocks.text.settings.text_style.options__1.label”
},
{
“value”: “subtitle”,
“label”: “t:sections.image-with-text.blocks.text.settings.text_style.options__2.label”
}
],
“default”: “body”,
“label”: “t:sections.image-with-text.blocks.text.settings.text_style.label”
}
]
},
{
“type”: “button”,
“name”: “t:sections.image-with-text.blocks.button.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.image-with-text.blocks.button.settings.button_label.label”,
“info”: “t:sections.image-with-text.blocks.button.settings.button_label.info”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.image-with-text.blocks.button.settings.button_link.label”
}
]
}
],
“presets”: [
{
“name”: “Video with text”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “text”
},
{
“type”: “button”
}
]
}
]
}
{% endschema %}
Hi Lboehm, is this code still up to date? I am trying to use it and I am getting a few errors in the customizer.
1 Like
@paulnett70 can you please share your store url so i will check.