Sense theme - replace 'image with text' with a video

[buildskincare]

Hi there! Anyone know how I could easily replace the the image in the image-with-text section with a video (autoplay mp4 not youtube or vimeo) and keep the same styling?

page link: buildskincare.ca

[OneCommerce]

Hello mate,

We are OneExperts from OneCommerce and we here to help you out.

To solve this:

1. Create a new section in your theme and call it "video-with-text"

2. Try this code:

<div class="video-with-text">
<video src="{{ section.settings.video_url }}" autoplay loop></video>
<p>{{ section.settings.text }}</p>
</div>

3. Add a new setting, use this code:

{% schema %}
{
"name": "Video with text",
"settings": [
{
"type": "video",
"id": "video_url",
"label": "Video"
},
{
"type": "text",
"id": "text",
"label": "Text"
}
]
}
{% endschema %}

4. Use CSS to style the video:

.video-with-text {
/* Your CSS styles for the video-with-text class go here */
}

video {
/* Your CSS styles for the video go here */
}

This way you should be able to upload your video and add some text in the section and it will automatically play when the page load. You may also need to add some javascript code to make it compatible with all the browsers and to stop it after some time or some other logic you want.

Hope this can help.

Regards,

OneExperts by OneCommerce

[BSS-Commerce]

Hi @buildskincare 

Go to Admin => Online Store => Theme => Edit Code => Section => Add new section. You name the section you want to add and paste the following code in:

<!-- Welcome section starts -->

{{ 'base.css' | asset_url | stylesheet_tag }}
{%- style -%}
.container{
  margin-top:50px;
  display:flex;
  position:relative;
  min-height:500px;
  justify-content: end;
}
  .videoWt_left_container{
    position:absolute;
    top:50%;
    left:100px;
    transform:translateY(-50%);
    max-width:35%;
    border-radius:10px;
    background:linear-gradient(to right, #f0fb9e,#f8fdd2);
    padding: 24px;
  }
  .videoWt_right_container{
    width:60%;
  }
  .videoWt_media{
      width:100%;
      height:100%;
     border-radius:10px;
  overflow:hidden
  }
  
  .view-btn{
    padding: 12px 32px;
    background:#000;
    cusor:pointer;
    border-radius:5px
  }
  .view-btn a{
    text-decoration:none;
    color: #f0fb9e
  }
.videoWt_media>video{
  width:100%;
  min-height: 100px;
 
}
{%- endstyle -%}
<section class="welcome">
  <div class="container page-width page-width-desktop section">
   <div class="videoWt_left_container">
      <div class="welcome-outter">
        {% if section.settings.section-heading != blank %}
        <h2 class="section-heading">{{ section.settings.section-heading }}</h2>
        {% endif %}
        {% if section.settings.section-large-heading != blank %}
        <h1 class="section-large-heading">{{ section.settings.section-large-heading }}</h1>
        {% endif %}
        {% if section.settings.description != blank %}
        <p class="discription">{{ section.settings.description }}</p>
        {% endif %}
      </div>
      <div class="col-xs-12 col-md-12 text-center">
        {% if section.settings.view-btn != blank %}
        <button class="view-btn">
          <a href="{{ section.settings.view-btn-link }}">{{ section.settings.view-btn }}</a>
        </button>
        {% endif %}
      </div>
   </div>
   <div class="videoWt_right_container">
      <div class="videoWt_media">
        {% if section.settings.video_url != blank %}
          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?autoplay=1&mute=1" name="youtube embed" allow='autoplay' frameborder="0" allowfullscreen>
            </iframe>
        {% endif %}
      </div>
   </div>
  </div>
</section>
<!-- Welcome section ends -->
{% schema %}
{
"name": "Welcome", // Section name
"settings": [
  {
  "id": "section-heading",
  "type": "text",
  "label": "Heading 1",
    "default":"Image with text"
  },
 
  {
  "id": "description",
  "type": "textarea",
  "default":"Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review",
  "label": "Description"
  },
  {
  "id": "view-btn-link",
  "type": "url",
  "label": "Button URL"
  },
  {
  "id": "view-btn",
  "type": "text",
  "label": "Button name",
  "default":"Buy now"
  },
  {
      "type": "video_url",
      "id": "video_url",
      "accept": [
        "youtube",
        "vimeo"
      ],
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "label": "video url",
      "placeholder": "Paste your video link url"
    }
],
 
"presets": [
  {
  "name": "Video with text",
  "category": "ADVANCED LAYOUT"
  }
]
}
{% endschema %}

Then go to Theme => Customize Theme and select the section you just created and use.

I hope that it's useful for you.

[buildskincare]

Hi, thank you! This looks much closer to what I was hoping. It's not very mobile friendly unfortunately. 

[heike1]

@buildskincare have you been able to solve this? I am also struggling with this issue 😞 @BSS-Commerce would you be able to make it mobile friendly? the way it is, it's unfortunately not usable.. thx!

[IkigaiBox]

Same did you find an answer?

[Michael_Czeiszp]

Thank you for sharing that custom Liquify code for a video with text section.   Creating the liquify file was easy, but its not showing up in the customization GUI.   I click on Add Section and the new code simply doesn't show up ;-(.   Is there some trick to it?