Video with text, button present and not registering line break

Video with text, button present and not registering line break

nativesons
Tourist
18 0 2

I followed a the tutorial linked on this thread  with a few of my own modifications to fix some functionality issues, and was able to add a "Video with text" section that preforms much likje the standard "Image with text" section. However there are two issues that seem to be presenting.

 

Firstly the button is still present even when the field is blank.

Screenshot 2024-08-02 at 9.22.57 PM.png

Secondly it does not seem to register line breaks.

Screenshot 2024-08-02 at 9.24.06 PM.png

 Is there a way to fix these two issues?

 

<!-- video with text section -->
<div id="vid-txt-{{ section.id }}" class="vid-text-con">
<div class="vid-text-wra page-width" >
<div class="vid-with-text-box" {% if section.settings.bg_clr %}style="background:{{ section.settings.body_text }}"{% endif %}>
<div class="text-content">
<div class="content">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.content }}</p>
<div class="section-btn">
<a class="button button--primary " href="{{ section.settings.url }}">{{ section.settings.btn_label }}</a>
</div>
</div>
</div>
<div class="video-section">
<div class="m_video">
{% if section.settings.select == 'MP4' %}
{% if section.settings.vid != blank %}
<video class="video-js" loop autoplay preload="none" muted playsinline loading='lazy'>
<source src="{{ section.settings.vid }}" type="video/mp4">
<source src="{{ section.settings.vid }}" type="video/ogg">
</video>
{% endif %}
{% else %}
{% if section.settings.i_vid != blank %}
<iframe width="100%" height="315" src="{{ section.settings.i_vid }}{% if section.settings.vid_auto %}?autoplay=1{% endif %}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>

<style>
.vid-text-wra {
margin-top: 30px;
padding-top: 40px;
padding-bottom: 40px;
}
.vid-with-text-box {
display: flex;
align-items: center;
padding: 20px 30px;
}
.text-content {
width: 50%;
padding: 50px 30px 40px;
}
.content h2 {
font-size: 28px;
line-height: 36px;
padding-bottom: 20px;
}
.content p {
font-size: 18px;
letter-spacing: 0.5px;
}
.video-section {
width: 50%;
height: 100%;
}
.m_video {
height: 100%;
}
.m_video video {
height: 100%;
width: 100%;
object-fit: cover;
}
.section-btn {
margin-top: 40px;
}

{% if section.settings.revrt %}
#vid-txt-{{ section.id }} .vid-with-text-box{
flex-direction: row-reverse;
}
{% endif %}
@media only screen and (max-width: 992px) {
{% if section.settings.m_revrt %}
.vid-with-text-box{
flex-direction: column-reverse;
}
{% endif %}
.text-content {
width: 100%;
}
.video-section {
width: 100%;
}
.vid-with-text-box {
padding: 0px 0px;
}
.text-content {
width: 100%;
padding: 20px 15px 20px;
}
.content h2 {
font-size: 24px;
line-height: 32px;
padding-bottom: 10px;
}
}
</style>

 

{% schema %}
{
"name": "video with text",
"class": "video_with_text",
"settings": [
{
"type": "checkbox",
"id": "revrt",
"label": "Video left"
},
{
"type": "checkbox",
"id": "m_revrt",
"label": "Video top on mobile"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Video With Text"
},
{
"type": "textarea",
"id": "content",
"label": "Content"
},
{
"type": "url",
"id": "url",
"label": "Button URL"
},
{
"type": "text",
"id": "btn_label",
"label": "Button URL"
},
{
"type": "radio",
"id": "select",
"label": "Video type",
"options": [
{
"value": "MP4",
"label": "MP4"
},
{
"value": "iframe",
"label": "Youtube/Vimeo"
}
],
"default": "MP4"
},
{
"type": "url",
"id": "vid",
"label": "MP4 video URL"
},
{
"type": "image_picker",
"id": "poster",
"label": "Poster on MP4 video"
},
{
"type": "checkbox",
"id": "check",
"label": "Video autoplay"
},
{
"type": "url",
"id": "i_vid",
"label": "Youtube/Vimeo video URL"
},
{
"type": "checkbox",
"id": "bg_clr",
"label": "background color"
},
{
"type": "color",
"id": "body_text",
"label": "BG-color",
"default": "#cdcdcd"
}
],
"presets": [
{
"name": "video with text"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Test site URL:  https://native-sons-roasters-3430.myshopify.com/

Theme: Out of the Sandbox- Flex

 

THank you!

Replies 0 (0)