Video with Text Section

Video with Text Section

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. Depending on the Shopify theme being used, certain CSS styles may be impacted. Please do not hesitate to contact us. 

Please be reminded, due to browser policy, video will be muted when autoplayed. 

Check DEMO store here 💻. Password: made4uo

What is Video with Text Section?

A "Video with Text Section" is a website element that combines a video with accompanying text. It's a way to present information or tell a story in a more engaging and dynamic way than just using text or images alone.

Why use a Video with Text Section?

  • Increased Engagement: Videos are naturally more captivating than static content. They can grab attention and encourage visitors to spend more time on your page.   
  • Improved Communication: Videos can convey complex information quickly and effectively, especially when combined with clear and concise text.   
  • Enhanced Visual Appeal: A well-designed video with text section can make your website look more professional and visually appealing.
  • Storytelling: Videos are a powerful tool for storytelling. They can help you connect with your audience on an emotional level and build brand loyalty.   
  • Versatility: Video with text sections can be used in a variety of ways, such as:
    • Showcasing products or services
    • Explaining a concept or process
    • Sharing customer testimonials   
    • Promoting an event or campaign 
    • Telling your brand story

Additional Considerations:

  • Purpose-Driven Content: Don't just add a video for the sake of it. Ensure the video content is relevant to the page's purpose and adds value for the visitor. A clear objective will guide your video creation and text overlay design.

  • Target Audience: Consider your target audience. What kind of video content will resonate with them? What information do they need? Tailor the video's style, tone, and message accordingly.

 What you are buying:

  • Responsive code and IOS friendly
  • 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 Video with Text Section

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.

<style>
.videoTextContainer {
display: flex;
margin: 0 var(--video-margin);
gap: var(--video-gap);
}
@media only screen and (min-width: 951px) {
.video-left {
flex-direction: row;
}
.video-right {
flex-direction: row-reverse;
}
.video-right .textWrapper {
padding-right: 5%;
}
}
.videoTextContainer > * {
width: 50%;
margin: auto;
}
.videoWrapper {
overflow: hidden;
}
.videoWrapper--box {
position: relative;
}
.videoWrapper--box > * {
width: 100%;
border: none;
object-fit: cover;
object-position: center center;
display: block;
}
.videoWrapper--box > img {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoTextButton {
width: max-content;
}
.textWrapper {
display: flex;
flex-direction: column;
}
.textWrapper > h2 {
margin: 0;
}
.textWrapper .uppercase {
text-transform: uppercase;
letter-spacing: 2px;
margin: 1rem 0;
}
@media only screen and (max-width: 950px) {
.videoTextContainer {
flex-direction: var(--mobile-video-placement);
margin: 0 5%;
}
.videoTextContainer > * {
width: 100%;
}
.video-right .textWrapper,
.video-left .textWrapper {
padding: 0 !important;
}
.margin-bottom--mobile {
margin-bottom: 2rem;
}
}
</style>
<div
{% if section.settings.default_page %}
class="page-width"
{% endif %}
>
<div
class="videoTextContainer {{section.settings.video_placement}}"
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" }};
--video-gap: {{ section.settings.video_gap |append: "px" }}
"
>
<div
class="videoWrapper {% if section.settings.mobile_video_placement == "column" %}margin-bottom--desktop{% endif %}"
style="border-radius: {{section.settings.video_radius | append: 'px' }}"
>
{% capture video_loader %}{% if section.settings.image_poster %}video-loader{% else %}div{% endif %}{% endcapture %}
<{{ video_loader }} class="videoWrapper--box">
{%- if section.settings.internal_video_url != blank or section.settings.internal_video_url_webm != blank -%}
<video
{% if section.settings.enable_loop %}
loop
{% endif %}
playsinline
{% if section.settings.enable_controls %}
controls
{% endif %}
{% if section.settings.enable_autoplay %}
preload="auto" autoplay muted
{% endif %}
{% if section.settings.image_poster != blank %}
poster="{{ section.settings.image_poster | image_url }}"
{% endif %}
style="aspect-ratio: {{ section.settings.upper_number | append: '/' | append: section.settings.lower_number }};"
>
{% if section.settings.internal_video_url_webm != blank %}
<source src="{{section.settings.internal_video_url_webm}}" type="video/mp4">
<source src="{{section.settings.internal_video_url_webm}}" type="video/webm">
{% else %}
<source src="{{section.settings.internal_video_url}}" type="video/mp4">
{% endif %}
Your browser is not supported to play the video!
</video>
{%- else -%}
{%- if section.settings.external_video_url.type == 'youtube' -%}
<iframe
src="https://www.youtube.com/embed/{{ section.settings.external_video_url.id }}?{% if section.settings.enable_autoplay %}autoplay=1&mute=1{% endif %}{% if section.settings.enable_loop %}&loop=1&playlist={{ section.settings.external_video_url.id }}{% endif %}{% unless section.settings.enable_controls %}&controls=0{% endunless %}"
{% if section.settings.enable_autoplay %}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" muted
{% endif %}
allowfullscreen
style="aspect-ratio: {{ section.settings.upper_number | append: '/' | append: section.settings.lower_number }};"
></iframe>
{%- else -%}
<iframe
src="https://player.vimeo.com/video/{{ section.settings.external_video_url.id }}?{% if section.settings.enable_autoplay %}&autoplay=1&muted=1{% endif %}{% if section.settings.enable_loop %}&loop=1&playlist={{ section.settings.external_video_url.id }}{% endif %}{% unless section.settings.enable_controls %}&controls=0{% endunless %}"
class="js-vimeo"
allowfullscreen
style="aspect-ratio: {{ section.settings.upper_number | append: '/' | append: section.settings.lower_number }};"
></iframe>
{%- endif -%}
{%- endif -%}
{% if section.settings.image_poster != blank %}
{{
section.settings.image_poster
| image_url: width: 900
| image_tag: alt: section.settings.image_poster.alt, sizes: '50vw', widths: '1100, 1500'
}}
{% endif %}
</{{ video_loader }}>
</div>
<div class="textWrapper{% if section.settings.mobile_video_placement == "column-reverse" %} margin-bottom--mobile{% endif %}">
{% for block in section.blocks %}
{% case block.type %}
{% when 'caption' %}
<small class="{{block.settings.text_style}}" style="text-align: {{ block.settings.caption_alignment}}">
{{- block.settings.caption -}}
</small>
{% when 'heading' %}
<h2 class="{{ block.settings.heading_size }}" style="text-align: {{ block.settings.heading_alignment}}">
{{ block.settings.heading }}
</h2>
{% when 'content' %}
<div style="text-align: {{ block.settings.content_alignment}}">
{{ block.settings.content }}
</div>
{% when 'button' %}
{% if block.settings.button_label != blank %}
<a
href="{{block.settings.button_link}}"
style="align-self: {{ block.settings.button_alignment }}"
class="videoTextButton button btn {% if block.settings.button_style == "button-primary" %}button-primary button--primary {% elsif block.settings.button_style == "button-secondary" %}button-secondary button--secondary{% endif %}"
>
{{ block.settings.button_label -}}
</a>
{% endif %}
{% endcase %}
{% endfor %}
</div>
</div>
</div>
<script>
if (!customElements.get('video-loader')) {
customElements.define('video-loader', class VideoLoader extends HTMLElement {
constructor() {
super();
this.video = this.querySelector('video');
this.iframe = this.querySelector('iframe');
this.image = this.querySelector('img');
if (this.iframe) this.image.style.display = "none";
if (this.video) this.video.addEventListener("canplay", this.init.bind(this))
}

init() {
if (this.video.readyState * 1 >= 3 ) {
this.image.style.display = "none";
if(this.video) this.video.play()
}
}
});
}
</script>
{% schema %}
{
"name": "Video with text",
"settings": [
{
"type": "checkbox",
"id": "default_page",
"label": "Adapt default page width",
"info": "Only applies for Shopify 2.0 free themes."
},
{
"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": "Show image until video is loaded"
},
{
"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": "select",
"id": "video_placement",
"info": "Ony works with desktop",
"options": [
{
"value": "video-left",
"label": "video left"
},
{
"value": "video-right",
"label": "video right"
}
],
"default": "video-left",
"label": "Video placement in desktop"
},
{
"type": "select",
"id": "mobile_video_placement",
"info": "Ony works with tablet/mobile",
"options": [
{
"value": "column",
"label": "video top"
},
{
"value": "column-reverse",
"label": "video bottom"
}
],
"default": "column",
"label": "Video placement in mobile"
},
{
"type": "range",
"id": "video_margin",
"min": 0,
"max": 200,
"step": 5,
"default": 5,
"unit": "px",
"label": "Video left and right margin"
},
{
"type": "range",
"id": "video_gap",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Video and text container gap",
"default": 30
},
{
"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": "Video with text",
"blocks": [
{
"type": "heading"
},
{
"type": "caption"
},
{
"type": "content"
},
{
"type": "button"
}
]
}
],
"blocks": [
{
"type": "heading",
"name": "heading",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Video with text",
"label": "Text"
},
{
"type": "select",
"id": "heading_size",
"default": "h1",
"label": "Heading size",
"info": "Only works to Shopify 2.0 FREE themes",
"options": [
{
"value": "h3",
"label": "x-small"
},
{
"value": "h2",
"label": "small"
},
{
"value": "h1",
"label": "medium"
},
{
"value": "h0",
"label": "large"
}
]
},
{
"type": "select",
"id": "heading_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
},
{
"value": "justify",
"label": "justify"
}
],
"default": "center",
"label": "Heading text alignment"
}
]
},
{
"type": "caption",
"name": "caption",
"limit": 1,
"settings": [
{
"type": "text",
"id": "caption",
"default": "Add a tagline",
"label": "caption"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "Subtitle"
},
{
"value": "uppercase",
"label": "Uppercase"
}
],
"default": "uppercase",
"label": "Caption"
},
{
"type": "select",
"id": "caption_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
},
{
"value": "justify",
"label": "justify"
}
],
"default": "center",
"label": "Caption text alignment"
}
]
},
{
"type": "content",
"name": "content",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "content",
"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_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
},
{
"value": "justify",
"label": "justify"
}
],
"default": "center",
"label": "Content text alignment"
}
]
},
{
"type": "button",
"name": "button",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "button_style",
"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": "select",
"id": "button_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "flex-end",
"label": "left"
},
{
"value": "flex-start",
"label": "right"
}
],
"default": "center",
"label": "Button alignment"
}
]
}
]
}
{% 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.

Updates: Added option to adjust the height and width of video using aspect-ratio. Also added options for looping, autoplay, and enable controls.

Conclusion

Incorporating video with text sections into your website can be a powerful way to enhance user engagement, improve communication, and boost conversions.  By carefully considering the purpose of your video, tailoring it to your target audience, and following best practices for text overlays, video optimization, and mobile responsiveness, you can create a compelling and effective user experience. Remember that a well-executed video with text section is more than just a visual element; it's a strategic tool for storytelling, product showcasing, and brand building.  Whether you choose a code-based approach or utilize a Shopify app (if available and suitable), prioritizing clarity, conciseness, and accessibility will ensure your video content resonates with your audience and contributes to your overall website success.  Don't be afraid to experiment and test different variations to discover what works best for your specific needs and goals.

That's it (",)

4 comments

Hi KAILUN ZHANG,

This works on All Shopify themes, including the latest version. Style might defer, but if you have issues, please free to reach us using ‘Chat with us’

Made4Uo •

is this good for Dawn version 12.0.0?

Kailun Zhang •

Hi @Dirk,

If you are using a Shopify 2.0 theme, you can insert a section. But if you want it in the middle of the page, you have to include the video in the page admin.

Made4Uo •

Hi,
I just included the code to our theme. It works fine. Is there any way to get the “video with text” part to the page section? I want to use it there as well.

Many thanks for your help.
Dirk Heibutzki

Dirk Heibutzki •

Leave a comment