Solved

How can I create a video with text section in the Dawn theme?

vincentdh
Tourist
9 2 35

Hi Community and Experts!

I am currently struggling with the following task:

 

I want to create a "Video with Text" section just like the "Image with Text" section. I found the following discussion where the Problem was solved, but no real solution was given: https://community.shopify.com/c/shopify-design/how-to-make-a-video-with-image-section-in-shopify/td-...

In the End it should look like this: https://myblend.se/pages/instructions

 

So, autoplay and loop as well.

 

I guess as stated in the discussion, duplicate the "Image with Text" section in the Section Folder in "Edit Code" and replace the Image code with video code. I cant figure out which is which and with what code to replace, the video.liquid code?

 

Edit: As well as add/configure an Asset .css

 

Thanks for the help!

 

@Zworthkey @KetanKumar 

Accepted Solutions (2)

vincentdh
Tourist
9 2 35

This is an accepted solution.

Hi everyone!

 

I hired a coder to do it since I couldn't fin anything helpful. Here you go:

 

Create a new section with this code, called "video-with-text.liquid"

 

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video style="max-width: 100%; height: 100%;" autoplay="autoplay" loop="loop" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="grid__item">
      <div class="video-with-text__content video-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="video-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.video-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>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.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

 

And create a new asset called "component-video-with-text.css" with this code:

 

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.video-with-text__content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

 

 

View solution in original post

KetanKumar
Shopify Partner
36898 3640 11983

This is an accepted solution.

@Bkimbrell 

thanks for more details can you please try this code

1. Go to Online Store->Theme-> Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.video-with-text video {
    position: relative !important;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 104 (104)

KetanKumar
Shopify Partner
36898 3640 11983

@vincentdh 

yes, please try ir same section code other page its work as well

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
vincentdh
Tourist
9 2 35

@KetanKumar 

Thanks for getting back! 

What do you mean with same section code, other page?

I want to have a separate section, where I can have a video and text side to side.

 

Wouldn't I need a component-video-with-text.css as well as a video-with-text-liquid?

 

If you could just post some code, I would very much appreciate it!

 

Thanks.

KetanKumar
Shopify Partner
36898 3640 11983

@vincentdh 

yes, please create new one and add

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sumanbhat
Explorer
60 1 20

Did you find a code ,if yes do you mind sharing here please

CasaNativa
Tourist
11 0 5

Hello, I added the code to my theme but the video is wrong. The theme that I´m using is Flex-bloom, do you have any solution for this?

 

This is how my page looks likeCaptura de Pantalla 2022-08-10 a la(s) 17.40.06.png

KetanKumar
Shopify Partner
36898 3640 11983

@CasaNativa 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CasaNativa
Tourist
11 0 5

Hi @KetanKumar   thanks for your answer

this is my URL https://casa-nativa.cl/

 

I want this Captura de Pantalla 2022-08-12 a la(s) 14.39.05.png

KetanKumar
Shopify Partner
36898 3640 11983

@CasaNativa 

yes, please try this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.

@media screen and (min-width: 750px){
.video-with-text .grid {
    display: flex;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CasaNativa
Tourist
11 0 5

Thank you very much for your Help, it's perfect

Paile
Excursionist
18 2 3

Hey @KetanKumar, thank you so much for the help in this thread! Would you be able to tell us if there's a way to make the videos' corners always round? And, I've noticed that the videos' size only adapts to the amount of text there is next to them, do you know if there's a way to just make them all the same size? Thanks in advance 😉

Paile
Excursionist
18 2 3

What's @vincentdh, I really appreciate you giving us this crazy section 🙂

I was wondering if you were still using it because I discovered a little bug. When a product has variants and one switches variants, the videos stop looping and therefore stop completely. Had you noticed this? If so, did you manage to fix it? Thanks again 

Spac-es
Shopify Partner
374 109 130

I just found a solution!!

 

After three whole days trying to improve the document: video-with-text.liquid , (where I added new features such as a pause and play button, focused on computers and mobile devices, etc.) here

 

I managed to prevent videos from stopping or freezing when selecting a product variant.

 

1º Go to media-gallery.js

2º Find and remove the following code (line 84):

    playActiveMedia(activeItem) {
      window.pauseAllMedia();
      const deferredMedia = activeItem.querySelector('.deferred-media');
      if (deferredMedia) deferredMedia.loadContent(false);
    }

 Finished

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
374 109 130

If you experience failures when removing this code on the "buy" and "add to cart" buttons, consider keeping the code and removing only the following line:

window.pauseAllMedia();

The updated code:

 

Spaces_0-1685019098552.png

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
hello20
New Member
4 0 0

Hi there, I'm wondering if there's a way to make the video play sound? Everything else works great with these updated codes I'm just hoping the sound will play. Any suggestions? Thanks so much!

Spac-es
Shopify Partner
374 109 130

In order to enable video audio, remove the following code snippet from your video-with-text.liquid file (line 7)

muted=""

The code would look like this:

        <video preload="metadata" style="max-width: 100%; height: 100%;" id="videoPlayer" webkit-playsinline="" playsinline="">

I hope it has helped you!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
derlynegee
Tourist
4 0 3

Hi Ketan,

I just came across this thread while trying to figure out how to add videos with text to my website. This worked!!! but it is only working on product pages. How do I have it listed as a template option so that I may add it to my home and collections pages as well?

firststop
Excursionist
24 0 11

The above codes worked well with desktop but the video is completely gone on mobile. Any idea why?

Paile
Excursionist
18 2 3

What's up, you have to paste some lines of code at the bottom of the base.css, just like KetanKumar showed in this thread

AvadaCommerce
Shopify Partner
3879 839 968

Hi @vincentdh 

You can have a look at this app PlusPage
This app can help you to add 'video with text' like 'image with text'. So instead of image, it will be a video from Youtube, Vimeo, or custom upload.
They have a tutorial here. 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!

banned

made4Uo
Shopify Partner
3833 716 1166

Hi @vincentdh ,

 

I am not sure if able to find solution but I just created a video with text section. You can also add an internal source video. Check the video for more info. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
meryhd
Visitor
3 0 0

i didn't find the code. can you please send it to me here

 

sumanbhat
Explorer
60 1 20

@vincentdh  do you mind sharing the theme name and the video with text and video with text overlay code please. it will be really helpful . i aam struggling with this please

 

vincentdh
Tourist
9 2 35

This is an accepted solution.

Hi everyone!

 

I hired a coder to do it since I couldn't fin anything helpful. Here you go:

 

Create a new section with this code, called "video-with-text.liquid"

 

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video style="max-width: 100%; height: 100%;" autoplay="autoplay" loop="loop" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="grid__item">
      <div class="video-with-text__content video-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="video-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.video-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>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.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

 

And create a new asset called "component-video-with-text.css" with this code:

 

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.video-with-text__content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

 

 

OVFCreative
Tourist
3 0 4

THANK YOU SOOOO MUCH!!

Lieon
Tourist
9 0 7

Great job @vincentdh , thnx for the help it works fine and to me but not in mobile view.

In mobile view the video disappears . Do you have any solution update?

Lieon | Despoina
Bkimbrell
Tourist
5 0 7

How would one increase the text size in the video with text box?  In addition, can you decrease the amount of space between this and another section?

Bkimbrell
Tourist
5 0 7

I also noticed the video does not show up on mobile devices...  Any idea how to fix this?

KetanKumar
Shopify Partner
36898 3640 11983

@Bkimbrell 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bkimbrell
Tourist
5 0 7

www.honestsoul.co

it's locked, password is honest001

KetanKumar
Shopify Partner
36898 3640 11983

@Bkimbrell 

thanks but i can''t see video section on home page can you show me 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bkimbrell
Tourist
5 0 7

It's on the Mission page.

Bkimbrell_0-1649615263064.pngBkimbrell_1-1649615310699.png

 

KetanKumar
Shopify Partner
36898 3640 11983

This is an accepted solution.

@Bkimbrell 

thanks for more details can you please try this code

1. Go to Online Store->Theme-> Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.video-with-text video {
    position: relative !important;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bkimbrell
Tourist
5 0 7

Ketan, you are awesome, that worked!  Thank you for your help!

KetanKumar
Shopify Partner
36898 3640 11983

@Bkimbrell 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxBorges
Visitor
1 0 0

Hi,

This has been very useful and just what I was looking for.

 

I just have a couple of questions...

 

1. For me, changing the size of the video doesn't work most of the time, does anyone else have this issue?

2. there seems to be padding on the left and right, so when I change the theme colour, there are white columns either side of the block, how can I fix this?

3. is it possible to add all the editing options that are available for the image with text section? 

e.g. content overlap, padding etc.? 

 

Thanks in advance 😊

arashid
Visitor
1 0 0

@KetanKumar , im also trying to upload video with text. i have implemented the above codes. but is there any way to also allow youtube url instead of just shopify url. 

Jonathan_Jelkin
Excursionist
12 0 4

This code is working well for me but I have a problem. Everything works as intended on initial landing, but once a product image or different variant is selected all the videos freeze. Is there any way to keep them playing?

Spac-es
Shopify Partner
374 109 130

Hi Jonathan and everyone!

 

I'll try to shed some light on all the issues I've seen relevant in this thread:

 

- video freeze when you select product variants

-Why doesn't it show up on mobile?

-add and improve blocks to the video-with-text section

 

I have been trying to avoid this bug. I have read a lot on the internet, and watched a lot of videos... Still I can't find a reason why the videos are stopped when you choose a variant of the product.

 

Of the thousand ideas I had, the last one was the one that worked for me. Include a pause and play button. In this way, when it stops you can start it again whenever you want. It's not the perfect solution, but it works.

 

Updated code from: video-with-text.liquid

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video style="max-width: 100%; height: 100%;" id="videoPlayer" loop="loop" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
        <div class="video-controls">
          <button id="playButton" class="video-control-button" onclick="playPauseVideo()">Play</button>
          <button id="pauseButton" class="video-control-button" onclick="playPauseVideo()" style="display: none;">Pause</button>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div 
        id="VideoWithText--{{ section.id }}"
        class="video-with-text__content video-with-text__content--{{ section.settings.height }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2
                class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.heading }}
              </h2>
            {%- when 'caption' -%}
              <p
                class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.caption | escape }}
              </p>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

<script>
  function playPauseVideo() {
    var videoPlayer = document.getElementById('videoPlayer');
    var playButton = document.getElementById('playButton');
    var pauseButton = document.getElementById('pauseButton');
    
    if (videoPlayer.paused) {
      videoPlayer.play();
     
playButton.style.display = 'none';
      pauseButton.style.display = 'inline-block';
    } else {
      videoPlayer.pause();
      playButton.style.display = 'inline-block';
      pauseButton.style.display = 'none';
    }
  }
</script>

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    },

    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
    },

{
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
    }
    
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Video with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },

  {
      "type": "caption",
      "name": "t:sections.image-with-text.blocks.caption.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "caption",
          "default": "Add a tagline",
          "label": "t:sections.image-with-text.blocks.caption.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
            }
          ],
          "default": "caption-with-letter-spacing",
          "label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
        },
        {
          "type": "select",
          "id": "text_size",
          "options": [
            {
              "value": "small",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
            },
            {
              "value": "medium",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
            },
            {
              "value": "large",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
            }
          ],
          "default": "medium",
          "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
        }
      ]
    },
    
    {
      "type": "text",
      "name": "Texto",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>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.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

Updated code from: component-video-with-text

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.video-with-text__text>h3 {
    color: #404040 !important;
}

I have also made some improvements. Now you have more options to edit the section. Added: desktop and mobile content alignment (left, right and center), a title caption... (by the way, if you want to change the color of the description text do it here: line 134 of the new code component-video-with-tex.css

 

If you want to edit the style of the button, add the following code at the beginning of the document: video-with-text.liquid ( starting on line 2, after {{ 'component-video-with-text.css' | asset_url | stylesheet_tag }} )

<style>
  /* Custom styles for the video control button */
  .video-control-button {
    background-color: transparent; /* Button background color */
    border-radius: 8px; /* Button border radius */
    font-size: 12px; /* Button font size */
    padding: 6px 16px; /* Button internal padding */
    color: #FFFFFF; /* Button text color */
  }
  .video-with-text__media {
    position: relative;
  }
  /* Custom styles for the video controls container */
  .video-controls {
    position: absolute;
    top: 10px;
    right: 10px;
  }
</style>

For those wondering how to watch the video on mobile, KetanKumar has already answered that, but I see many still asking. I'll rewrite his answer:

1. Go to Online Store->Theme-> Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.video-with-text video {
    position: relative !important;
}
}

And I think that would be it! If you have any more questions, don't hesitate to ask. Like if I helped you! 👍

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
forbidenarea
Tourist
4 0 3

Hi Spac-Es. Im getting the error "Invalid preset "Video with text": cannot include blocks in preset because there are no blocks defined."' when trying to save the "video-with-text.liquid" file. Any ideas on what i am doing wrong please? thank you.

Spac-es
Shopify Partner
374 109 130

Hello Forbiddenarea! I have improved the code and fixed the error you mention. By the way, since the video is in a "loop", when going from the last frame to the first, a kind of cut is usually seen; I have fixed this by adding an animation to make it look smoother on mobile devices, on PC it should look perfect.

 

I hope this helps you!

This is the code I'm using in my store currently:

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}" id="animation-container">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video preload="metadata" style="max-width: 100%; height: 100%;" id="videoPlayer" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
        <div class="video-controls">
          <button id="playButton" class="video-control-button" onclick="playPauseVideo()">Play</button>
          <button id="pauseButton" class="video-control-button" onclick="playPauseVideo()" style="display: none;">Pause</button>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div 
        id="VideoWithText--{{ section.id }}"
        class="video-with-text__content video-with-text__content--{{ section.settings.height }} image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2
                class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.heading }}
              </h2>
            {%- when 'caption' -%}
              <p
                class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}"
                {{ block.shopify_attributes }}
              >
                {{ block.settings.caption | escape }}
              </p>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

<script>
  function playPauseVideo() {
    var videoPlayer = document.getElementById('videoPlayer');
    var playButton = document.getElementById('playButton');
    var pauseButton = document.getElementById('pauseButton');
    
    if (videoPlayer.paused) {
      videoPlayer.play();
      playButton.style.display = 'none';
      pauseButton.style.display = 'inline-block';
    } else {
      videoPlayer.pause();
      playButton.style.display = 'inline-block';
      pauseButton.style.display = 'none';
    }
  }
  
  document.addEventListener('DOMContentLoaded', function() {
    var videoPlayer = document.getElementById('videoPlayer');
    var playButton = document.getElementById('playButton');
    var pauseButton = document.getElementById('pauseButton');
    
// Check if it is running on PC
    var isDesktop = window.matchMedia("(min-width: 1024px)").matches;
    
// Autoplay on PC only
    if (isDesktop) {
      videoPlayer.autoplay = true;
      playButton.style.display = 'none';
      pauseButton.style.display = 'inline-block';
    }
    
// Update buttons when pausing/playing the video and restart immediately when finished
    videoPlayer.addEventListener('pause', function() {
      playButton.style.display = 'inline-block';
      pauseButton.style.display = 'none';
    });
    
    videoPlayer.addEventListener('play', function() {
      playButton.style.display = 'none';
      pauseButton.style.display = 'inline-block';
    });

    if (isDesktop) {
      videoPlayer.addEventListener('ended', function() {
          videoPlayer.currentTime = 0;
          videoPlayer.play();
      });
    }

// Add smooth fade out when restarting video on completion (mobile only)
    if (!isDesktop) {
      videoPlayer.addEventListener('ended', function() {
        fadeOut(videoPlayer, 300, function() {
          videoPlayer.currentTime = 0;
          fadeIn(videoPlayer, 300);
          videoPlayer.play();
        });
      });
    }
  });

function fadeOut(element, duration, callback) {
  element.style.opacity = 1;
  var currentTime = 0;
  var increment = 0.05;
  var interval = setInterval(function() {
    currentTime += increment;
    element.style.opacity = 1 - currentTime;
    if (currentTime >= 1) {
      clearInterval(interval);
      callback();
    }
  }, duration * increment);
}

function fadeIn(element, duration) {
  element.style.opacity = 0;
  var currentTime = 0;
  var increment = 0.05;
  var interval = setInterval(function() {
    currentTime += increment;
    element.style.opacity = currentTime;
    if (currentTime >= 1) {
      clearInterval(interval);
    }
  }, duration * increment);
}
</script>


{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    },

    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
    },

{
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
    }
    
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Video with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },

  {
      "type": "caption",
      "name": "t:sections.image-with-text.blocks.caption.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "caption",
          "default": "Add a tagline",
          "label": "t:sections.image-with-text.blocks.caption.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
            }
          ],
          "default": "caption-with-letter-spacing",
          "label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
        },
        {
          "type": "select",
          "id": "text_size",
          "options": [
            {
              "value": "small",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
            },
            {
              "value": "medium",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
            },
            {
              "value": "large",
              "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
            }
          ],
          "default": "medium",
          "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
        }
      ]
    },
    
    {
      "type": "text",
      "name": "Text",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>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.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
forbidenarea
Tourist
4 0 3

Thanks for getting back @Spac-es very much appreciated. unfortunately i am still getting the same error when trying to save the file.

Screenshot 2023-07-02 at 11.05.31.png

Spac-es
Shopify Partner
374 109 130

I just discovered the error. It's not about the code. It's just a Shopify bug.

 

Do the following steps:

1- Copy and paste the code that I gave you previously.
2- You will see the following error: Invalid preset "Video with text": cannot include blocks in preset because there are no blocks defined.
3- Delete the following code:

  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]

4- You will see the following error: Invalid JSON code in the schema tag.
5- Remove the comma from the "]"

image-video.PNG

6- Save the file.

7- At the top left, access the three dots (Customize theme).

puntos.PNG

 

7- Wait for the page to load completely and try to find and add the Image-with-text section, you will see that it does not appear.

sección.PNG

 

8- Go back to "Edit code" in the three dots.

9- Add the comma that we eliminated.
10- Add the code that we removed.

Captura.PNG
11- Save the file.
12- You will no longer see any errors.
13- You can go back to the "Customizer" and add the new section: Video with text.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
forbidenarea
Tourist
4 0 3

WOW. Amazing. That worked exactly as described. Thank you.

Thats some impressive trouble shooting. really. thank you.

Tomas666
Visitor
1 0 1

thank you for your help but could you please help me why the play button is not even on the video?

Tomas666_0-1704388765785.png

 

juliantiscione
Tourist
11 0 1

hello, the original code works fine for me, it is just the mobile issue. It is showing a blank space and not showing the video at all. I tried adding your solution to the base.css and it still doesn't work

Spac-es
Shopify Partner
374 109 130

Can you share the URL of your website with me? (including the password if there is one)

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
juliantiscione
Tourist
11 0 1

https://irriniti.com/products/irriniti-portable-lint-hair-remover     this is the product page. so on desktop it works fine but on mobile it is blank. thank you for taking the time

Spac-es
Shopify Partner
374 109 130

I think the issue with your code is the 'autoplay':

 

1.PNG

 

Many mobile devices (if not all) don't allow automatic playback. That's why in the code I provided, a 'play' and 'pause' button are added, toggling when pressed.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
juliantiscione
Tourist
11 0 1

i see, well maybe you can help me further to figure this out. I got the idea of video and text section from this website https://thevortix.com/products/vortix-smart-car-vacuum-air-blower  and they have that feature where the video is on autoplay and it works on mobile. Maybe you can check their code and see the difference for the solution. thanks