Video with Text Section

Video with Text Section

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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

Check DEMO store here 💻. Password: made4uo

 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

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. 

To start:

1. Go to your Admin store > Themes > Actions > Edit code.

2. Open the Sections folder and click "Add a new section." You can name it whatever you want.

3. Replace the default code from the newly created section with the code below. Then click "SAVE.

<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" }};">
{% for block in section.blocks %}
{% case block.type %}
{% when 'video' %}
<div class="videoWrapper {% if section.settings.mobile_video_placement == "column" %}margin-bottom--desktop{% endif %}">
{%- if block.settings.internal_video_url != 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 %}
style="aspect-ratio: {{ block.settings.upper_number | append: '/' | append: block.settings.lower_number }};
border-radius: {{block.settings.video_radius | append: 'px' }}">
<source src="{{block.settings.internal_video_url}}" type="video/mp4">
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>

<div class="textWrapper {{section.settings.content_alignment}} {{ block.settings.heading_size }} {% if section.settings.mobile_video_placement == "column-reverse" %}margin-bottom--mobile{% endif %}">
{% when "caption" %}
<small class="{{block.settings.text_style}}">{{block.settings.caption}}</small>
{% when "heading" %}
<h2 class="{{ block.settings.heading_size }}">{{block.settings.heading}}</h2>
{% when "content" %}
{{block.settings.content}}
{% when "button" %}
{% if block.settings.button_label != blank %}
<a href="{{block.settings.button_link}}"
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>
<style>
.videoTextContainer {
display: flex;
margin: 0 var(--video-margin);
}

.video-left {
flex-direction: row;
}

.video-left .textWrapper {
padding-left: 5%;
}

.video-right {
flex-direction: row-reverse;
}

.video-right .textWrapper {
padding-right: 5%;
}

.videoTextContainer > * {
width: 50%;
margin: auto;
}

.videoWrapper > * {
width: 100%;
border-radius: {{section.settings.video_radius | append: 'px' }};
border: none;
}

.videoTextButton {
width: max-content;
}

.textWrapper {
display: flex;
flex-direction: column;
}

.textWrapper > h2 {
margin: 0;
}

.center {
align-items: center;
}

.right {
align-items: flex-end;
}

.left {
align-items: flex-start;
}

.center p {
text-align: center;
}

.left p {
text-align: left;
}

.right p {
text-align: right;
}

.textWrapper .uppercase {
text-transform: uppercase;
letter-spacing: 2px;
margin: 1rem 0;
}
.margin-bottom--desktop {
margin-bottom: 1rem;
}

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: 749px) {
.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>
{% schema %}
{
"name": "Video with text",
"settings": [
{
"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": "select",
"id": "content_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
}
],
"default": "center",
"label": "Content text alignment"
},
{
"type": "range",
"id": "video_margin",
"min": 0,
"max": 200,
"step": 5,
"default": 5,
"unit": "px",
"label": "Video left and right margin"
},
{
"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": "video"
},
{
"type": "heading"
},
{
"type": "caption"
},
{
"type": "button"
}
]
}
],
"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": "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": "heading",
"name": "heading",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Video with text",
"label": "Text"
},
{
"type": "select",
"id": "heading_size",
"info": "Only works to Shopify 2.0 FREE themes",
"options": [
{
"value": "h2",
"label": "small"
},
{
"value": "h1",
"label": "medium"
},
{
"value": "h0",
"label": "large"
}
],
"default": "h1",
"label": "Heading size"
}
]
},
{
"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": "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": "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."
}
]
}
]
}
{% endschema %}


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

 

That's it (",)

Copied!
Voltar para o blogue

2 comentários

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

Deixe um comentário