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.

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.

Check DEMO store here 💻. Password: made4uo

 

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 page-width {{section.settings.video_placement}}">
<div class="videoWrapper">
{%- if section.settings.internal_video_url != blank -%}
<video autoplay muted loop playsinline none>
<source src="{{section.settings.internal_video_url}}" type="video/mp4">
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 }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ section.settings.external_video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen></iframe>
{%- endif -%}
{%- endif -%}
</div>
<div class="textWrapper {{section.settings.content_alignment}}">
{% for block in section.blocks %}
{% case block.type %}
{% when "caption" %}
<small class="{{block.settings.text_style}}">{{block.settings.caption}}</small>
{% when "heading" %}
<h2>{{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">{{block.settings.button_label}}</a>
{% endif %}
{% endcase %}
{% endfor %}
</div>
</div>
<style>
.videoTextContainer {
display: flex;
margin: 5rem auto;
}

.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;
aspect-ratio: 7/4;
}

.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;
}

@media only screen and (max-width: 749px) {
.videoTextContainer {
flex-direction: column;
margin: 5%;
}

.videoTextContainer > *{
width: 100%;
}

.videoWrapper {
margin-bottom: 1rem;
}

.textWrapper {
padding-left: 0;
}
}
</style>
{% schema %}
{
"name": "Video with text",
"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": "select",
"id": "video_placement",
"options": [
{
"value": "video-left",
"label": "video left"
},
{
"value": "video-right",
"label": "video right"
}
],
"default": "video-left",
"label": "Video placement"
},
{
"type": "range",
"id": "video_radius",
"min": 0,
"max": 99,
"step": 1,
"default": 10,
"label": "Video frame radius"
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
},
{
"value": "right",
"label": "right"
}
],
"default": "center",
"label": "Content text alignment"
}
],
"presets": [
{
"name": "Video with text",
"blocks": [
{
"type": "heading"
},
{
"type": "caption"
},
{
"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",
"options": [
{
"value": "h2",
"label": "small"
},
{
"value": "h1",
"label": "medium"
},
{
"value": "h0",
"label": "large"
}
],
"default": "h1",
"label": "medium"
}
]
},
{
"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": "text_size",
"options": [
{
"value": "small",
"label": "small"
},
{
"value": "medium",
"label": "medium"
},
{
"value": "large",
"label": "large"
}
],
"default": "medium",
"label": "medium"
}
]
},
{
"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": "text_style",
"options": [
{
"value": "body",
"label": "body"
}, {
"value": "subtitle",
"label": "subtitle"
}
],
"default": "body",
"label": "body"
}
]
},
{
"type": "button",
"name": "button",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "Button label",
"info": "Leave the label blank to hide the button."
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
]
}
{% endschema %}

 

That's it (",)

Copied!
Voltar para o blogue

Deixe um comentário