Centered Video with Texts

Centered Video with Texts

Compatibility: Any Shopify themes, work best on Shopify 2.0 FREE themes 

Add a video with text section in your Shopify website. You can choose your video source from youtube, vimeo or even internal source. I added a video container radius as well.

Please be reminded, due to browser policy, video will be muted when autoplayed. Please see policy here. Some CSS styles might vary depending on the theme. 

Make sure to adjust the video size. On this section, it is recommended to use a 2/3 aspect ratio sized video.

Check DEMO store here 💻. Password: made4uo

If you want to have one video and a text, you can use this section instead here.

What are Centered Video with Text Sections?

Centered video with text sections are multimedia elements that combine a central video with overlaid text. These sections can be strategically placed on key pages of your Shopify store to grab user attention, convey important messages, and showcase products or promotions in a visually engaging way.

Why Use Centered Video with Text Sections?

There are several advantages to incorporating centered video with text sections on your Shopify store:

  • Increased Engagement: Videos are a powerful tool for capturing user attention and keeping them interested compared to static text blocks. The combination of video and text can enhance communication and potentially lead to a more immersive user experience.
  • Improved Brand Storytelling: Videos allow you to showcase your brand personality, product features, or customer testimonials in a dynamic and memorable way.
  • Clear Communication of Key Messages: The text overlays provide an opportunity to highlight key points or product benefits alongside the video content, ensuring users grasp the message quickly.
  • Enhanced Design Appeal: Well-crafted video sections can add a visually dynamic element to your store, potentially improving the overall aesthetics and user experience.

Additional Considerations:

While centered video with text sections offer a visually captivating way to communicate with your customers, here are some additional factors to consider for successful implementation:

  • Video Content Strategy:

    • High-Quality Videos: Use high-resolution, professional-looking videos that are clear, engaging, and relevant to your target audience. Grainy or poorly produced videos can have a negative impact on brand perception.
    • Video Length: Keep video length concise and focused on conveying the key message. Long, drawn-out videos might lose user interest quickly.
    • Consider Background Music: Background music can enhance the overall impact of the video, but ensure it complements the visuals and doesn't overwhelm the text overlays.

  • Text Overlay Optimization:

    • Clarity and Conciseness: Keep the text overlay concise and easy to read. Users may only have a few seconds to grasp the message, so focus on the most important points.
    • Text Size and Placement: Choose a text size that is clear and readable on all devices, especially considering mobile users. Position the text strategically to avoid obstructing key elements within the video.
    • Color Contrast: Ensure the text color offers a clear contrast against the video background for optimal readability.

  • Accessibility:

    • Closed Captions: Provide closed captions for your video content to ensure accessibility for users with hearing impairments.
    • Video Description: Include a brief video description that outlines the content and purpose of the video. This can be helpful for search engine optimization (SEO) and screen readers used by visually impaired users.

  • Mobile Optimization:

    • Responsive Design: Ensure the video with text section displays and functions flawlessly on mobile devices. Consider potential differences in screen size and data usage when optimizing the video for mobile viewing.

 What you are buying:

  • Video is at the center with 4 texts containers on each side
  • Video section that accepts internal and external source
  • Well written code with NO external library being use
  • Able to control autoplay, looping, show/hide controls
  • Able to add poster (cover image) when using an internal source video
  • Able to resize the video height and width using aspect ratio
  • Support WebM video type for internal source video ONLY

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us."  We are just a button away.

[] 

Steps on how to add Centered Video with Text Sections to Your Shopify Store

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

Step #2. Create a new section file

In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.

<div
class="video-text__container page-width"
style="
padding-top: {{ section.settings.padding_top | append: "px" }};
padding-bottom: {{ section.settings.padding_bottom | append: "px" }};
--mobile-video-placement: {{ section.settings.mobile_video_placement }};
--video-margin: {{ section.settings.video_margin |append: "px" }};
"
>
{% assign grid_area = '' %}
{% for block in section.blocks %}
{% case forloop.index %}
{% when 1 %}
{% assign grid_area = 'left' %}
{% when 2 %}
{% assign grid_area = 'center' %}
{% when 3 %}
{% assign grid_area = 'right' %}
{% endcase %}
{% case block.type %}
{% when 'video' %}
<div class="video__wrapper" style="grid-area: {{ grid_area }}">
{%- if block.settings.internal_video_url != blank or block.settings.internal_video_url_webm != blank -%}
<video
{% if block.settings.enable_loop %}
loop
{% endif %}
playsinline
{% if block.settings.enable_controls %}
controls
{% endif -%}
{% if block.settings.enable_autoplay %}
autoplay muted
{% endif %}
poster="{{ block.settings.image_poster | image_url }}"
style="
aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }};
border-radius: {{block.settings.video_radius | append: 'px' }}
"
>
{% if block.settings.internal_video_url_webm != blank %}
<source src="{{block.settings.internal_video_url_webm}}" type="video/mp4">
<source src="{{block.settings.internal_video_url_webm}}" type="video/webm">
{% else %}
<source src="{{block.settings.internal_video_url}}" type="video/mp4">
{% endif %}
Your browser is not supported to play the video!
</video>
{%- else -%}
{%- if block.settings.external_video_url.type == 'youtube' -%}
<iframe
src="https://www.youtube.com/embed/{{ block.settings.external_video_url.id }}?enablejsapi=1{% if block.settings.enable_autoplay %}&autoplay=1&muted=1{% endif %}{% if block.settings.enable_loop %}&loop=1&playlist={{ block.settings.external_video_url.id }}{% endif %}{% if block.settings.enable_controls != true %}&controls=0{% endif %}"
class="js-youtube"
allowfullscreen
style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }}; border-radius: {{block.settings.video_radius | append: 'px' }}"
></iframe>
{%- else -%}
<iframe
src="https://player.vimeo.com/video/{{ block.settings.external_video_url.id }}?{% if block.settings.enable_autoplay %}&autoplay=1&muted=1{% endif %}{% if block.settings.enable_loop %}&loop=1{% endif %}{% if block.settings.enable_controls != true %}&controls=0{% endif %}"
class="js-vimeo"
allowfullscreen
style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }}; border-radius: {{block.settings.video_radius | append: 'px' }}"
></iframe>
{%- endif -%}
{%- endif -%}
</div>
 
{% when 'text_column' %}
<div class="text__container" style="grid-area: {{ grid_area }}">
<div class="video-text__wrapper {{section.settings.content_alignment_1}}">
{% if block.settings.image_1 != blank %}
<img src="{{ block.settings.image_1 | img_url: "small" }}" alt="{{ block.settings.image_1 }}">
{% endif %}
{% if block.settings.heading_1 != blank %}
<h2
class="{{ block.settings.heading_size_1 }}"
style="text-align: {{ block.settings.heading_text_align_1 }}; color: {{ block.settings.heading_color_1 }}"
>
{{ block.settings.heading_1 }}
</h2>
{%- endif %}
<div style="text-align: {{ block.settings.content_text_align_1 }}">{{ block.settings.content_1 }}</div>
{% if block.settings.button_label_1 != blank %}
<a
href="{{block.settings.button_link_1}}"
class="video-text__button button btn {% if block.settings.button_style_1 == "button-primary" %}button-primary button--primary {% elsif block.settings.button_style_1 == "button-secondary" %}button-secondary button--secondary{% endif %}"
>
{{ block.settings.button_label_1 }}
</a>
{% endif %}
</div>
<div class="video-text__wrapper {{section.settings.content_alignment_2 }}" style="grid-area: {{ grid_area }}">
{% if block.settings.image_2 != blank %}
<img src="{{ block.settings.image_2 | img_url: "small" }}" alt="{{ block.settings.image_2 }}">
{% endif %}
{% if block.settings.heading_2 != blank %}
<h2
class="{{ block.settings.heading_size_2 }}"
style="text-align: {{ block.settings.heading_text_align_2 }}; color: {{ block.settings.heading_color_2 }}"
>
{{ block.settings.heading_2 }}
</h2>
{%- endif %}
<div style="text-align: {{ block.settings.content_text_align_2 }}">{{ block.settings.content_2 }}</div>
{% if block.settings.button_label_2 != blank %}
<a
href="{{block.settings.button_link_2}}"
class="video-text__button button btn {% if block.settings.button_style_2 == "button-primary" %}button-primary button--primary {% elsif block.settings.button_style_2 == "button-secondary" %}button-secondary button--secondary{% endif %}"
>
{{ block.settings.button_label_2 }}
</a>
{% endif %}
</div>
</div>
{% endcase %}
{% endfor %}
</div>
<style>
.video-text__container {
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(4, 25%);
gap: 0px 0px;
grid-template-areas:
"left center center right"
"left center center right"
"left center center right"
"left center center right";
margin: auto;
height: max-content;
width: 100%;
}
 
.video-text__container > * {
width: 100%;
height: 100%;
margin: auto;
}
 
.video__wrapper > * {
width: 100%;
border-radius: {{section.settings.video_radius | append: 'px' }};
border: none;
}
 
.video__wrapper {
grid-area: center;
display: flex;
align-content: center;
justify-content: center;
}
 
.video__wrapper video {
height: auto;
}
 
.video-text__button {
width: max-content;
}
 
.video-text__wrapper {
display: flex;
flex-direction: column;
padding: 0 2.5rem;
align-items: flex-start;
justify-content: flex-start;
margin: 2rem 0;
}
 
.text__container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
 
.video-text__wrapper img {
width: 40px;
height: auto;
aspect-ratio: 1;
margin-bottom: 1rem;
display: flex;
align-self: start;
}
 
.video-text__wrapper div{
margin-bottom: 1rem;
}
 
.video-text__wrapper h2 {
margin: 0;
line-height: 1.2;
}
 
.video-text__wrapper p {
margin: 0.5rem 0;
line-height: 1.4;
}
 
.video-text__wrapper .uppercase {
text-transform: uppercase;
letter-spacing: 2px;
margin: 1rem 0;
}
 
h2.h0 {
font-size: clamp(4rem, 2vw, 5.2rem);
}
 
h2.h1 {
font-size: clamp(3rem, 2vw, 4rem);
}
 
h2.h2 {
font-size: clamp(2rem, 2vw, 2.4rem);
}
 
@media only screen and (max-width: 1025px) {
.video-text__container {
grid-template-areas:
"left left center center"
"left left center center"
"right right right right"
"right right right right";
}
}
 
@media only screen and (max-width: 1025px) {
.video-text__container {
display: flex;
flex-direction: column;
}
}
</style>
{% schema %}
{
"name": "Centered Video With Texts",
"settings": [
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding top",
"default": 30
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding bottom",
"default": 30
}
],
"presets": [
{
"name": "Centered Video With Texts",
"blocks": [
{
"type": "text_column"
},
{
"type": "video"
},
{
"type": "text_column"
}
]
}
],
"blocks": [
{
"type": "video",
"name": "Video",
"limit": 1,
"settings": [
{
"type": "video_url",
"id": "external_video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https:\/\/youtu.be\/zGL2sBgBLoI",
"label": "External video url",
"placeholder": "https://youtu.be/zGL2sBgBLoI",
"info": "For external video, add the link and leave the internal video blank."
},
{
"type": "text",
"id": "internal_video_url",
"label": "Internal Video Url",
"info": "For internal video, add the link and leave the external video blank."
},
{
"type": "text",
"id": "internal_video_url_webm",
"label": "Internal Video Url WebM type",
"info": "For internal video, add the link and leave the external video blank."
},
{
"type": "image_picker",
"id": "image_poster",
"label": "Image poster, works with the internal source video only"
},
{
"type": "header",
"content": "Video ratio size",
"info": "This affects the width and height of the video. Use 1/1 if video is square, 8 / 6 for rectangle"
},
{
"type": "range",
"id": "upper_number",
"min": 0,
"max": 50,
"step": 1,
"label": "Video upper number",
"default": 24
},
{
"type": "range",
"id": "lower_number",
"min": 0,
"max": 50,
"step": 1,
"label": "Video lower number",
"default": 13
},
{
"type": "range",
"id": "video_radius",
"min": 0,
"max": 100,
"step": 1,
"default": 10,
"label": "Video frame radius"
},
{
"type": "header",
"content": "Video settings",
"info": "Note: If chooses autoplay, video is automatically muted, per web browser guideline [here](https:\/\/developer.chrome.com\/blog\/autoplay)"
},
{
"type": "checkbox",
"id": "enable_autoplay",
"default": true,
"label": "Enable autoplay"
},
{
"type": "checkbox",
"id": "enable_loop",
"default": true,
"label": "Enable looping"
},
{
"type": "checkbox",
"id": "enable_controls",
"default": true,
"label": "Enable controls"
}
]
},
{
"type": "text_column",
"name": "text",
"limit": 2,
"settings": [
{
"type": "header",
"content": "Text section 1",
"info": "Leave area blank to hide"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "text",
"id": "heading_1",
"default": "Centered Video With Texts",
"label": "Text"
},
{
"type": "color",
"id": "heading_color_1",
"default": "#000",
"label": "Heading text color"
},
{
"type": "select",
"id": "heading_size_1",
"info": "Only works to Shopify 2.0 FREE themes",
"options": [
{
"value": "h3",
"label": "small"
},
{
"value": "h2",
"label": "medium"
},
{
"value": "h1",
"label": "large"
}
],
"default": "h2",
"label": "Heading size"
},
{
"type": "select",
"id": "heading_text_align_1",
"options": [
{
"value": "left",
"label": "left align"
},
{
"value": "right",
"label": "right align"
},
{
"value": "justify",
"label": "justify"
},
{
"value": "center",
"label": "center"
}
],
"default": "center",
"label": "Heading text alignment"
},
{
"type": "richtext",
"id": "content_1",
"default": "<p>Pair text with a video to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "richtext"
},
{
"type": "select",
"id": "content_text_align_1",
"options": [
{
"value": "left",
"label": "left align"
},
{
"value": "right",
"label": "right align"
},
{
"value": "justify",
"label": "justify"
},
{
"value": "center",
"label": "center"
}
],
"default": "center",
"label": "Content text alignment"
},
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link_1",
"label": "Button link"
},
{
"type": "select",
"id": "button_style_1",
"options": [
{
"value": "button-primary",
"label": "button primary"
},
{
"value": "button-secondary",
"label": "button secondary"
},
{
"value": "",
"label": "none"
}
],
"default": "button-primary",
"label": "Button style",
"info": "Button style depends on the theme used."
},
{
"type": "header",
"content": "Text section 2",
"info": "Leave area blank to hide"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "text",
"id": "heading_2",
"default": "Centered Video With Texts",
"label": "Text"
},
{
"type": "color",
"id": "heading_color_2",
"default": "#000",
"label": "Heading text color"
},
{
"type": "select",
"id": "heading_size_2",
"info": "Only works to Shopify 2.0 FREE themes",
"options": [
{
"value": "h3",
"label": "small"
},
{
"value": "h2",
"label": "medium"
},
{
"value": "h1",
"label": "large"
}
],
"default": "h2",
"label": "Heading size"
},
{
"type": "select",
"id": "heading_text_align_2",
"options": [
{
"value": "left",
"label": "left align"
},
{
"value": "right",
"label": "right align"
},
{
"value": "justify",
"label": "justify"
},
{
"value": "center",
"label": "center"
}
],
"default": "center",
"label": "Heading text alignment"
},
{
"type": "richtext",
"id": "content_2",
"default": "<p>Pair text with a video to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
"label": "richtext"
},
{
"type": "select",
"id": "content_text_align_2",
"options": [
{
"value": "left",
"label": "left align"
},
{
"value": "right",
"label": "right align"
},
{
"value": "justify",
"label": "justify"
},
{
"value": "center",
"label": "center"
}
],
"default": "center",
"label": "Content text alignment"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link_2",
"label": "Button link"
},
{
"type": "select",
"id": "button_style_2",
"options": [
{
"value": "button-primary",
"label": "button primary"
},
{
"value": "button-secondary",
"label": "button secondary"
},
{
"value": "",
"label": "none"
}
],
"default": "button-primary",
"label": "Button style",
"info": "Button style depends on the theme used."
}
]
}
]
}
{% endschema %}

 

Step #3. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Step #4. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add the section using the theme editor, and find the Centered Video With Texts. Make sure to SAVE once you are done customizing.

 

Conclusion

By incorporating centered video with text sections on your Shopify store, you can create a dynamic and engaging way to showcase your products or brand message.

0 comments

Leave a comment