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

[vincentdh]

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 

[vincentdh · 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;
}

[Spac-es]

In my case, the videos on this page don't play from my mobile device. Same issue.

The only difference in their code is the following attributes included: controlslist="nodownload" disablepictureinpicture="" The first one prevents users from downloading the video using playback controls, and the second attribute prevents users from detaching the video from the player and placing it in a floating window that overlays other applications or windows.

[juliantiscione]

that is weird, for me it plays the video autoplay perfectly which is what I want. I am using safari on iphone 14 pro 

[Spac-es]

Depending on the device and browser. I used Android and the browser called 'Mi Browser.' Anyway, here's some relevant information I found that might help you:

 Fix Elementor Video Autoplay not Working on Mobile

[willayy]

First off thank you so much for this it works beautifully. On desktop it is perfect. On my mobile device, the video shows up blank with just a button for play in the top left corner. I am able to hit play but it looks rather weird with no image there. is there anyway to correct this? 

[Spac-es]

Sure thing! If I manage to solve it in the next few days, I'll let you know.

[Spac-es]

The following code allows displaying a preview image before the video starts playing. This is particularly useful on mobile devices as it prevents the video from showing a blank screen when paused.

Don't forget to add the URL of your cover image within the 'poster' attribute.

Here's an example below:

<video preload="metadata" style="max-width: 100%; height: 100%;" id="videoPlayer" 
muted="" webkit-playsinline="" playsinline="" poster="https://images.pexels.com/photos/1566909/pexels-photo-1566909.jpeg">

Result:

[Ivan_58]

Appreciate your help with the code a lot! I do have one question about where I should put the code mentioned above, to create a preview for the vid. Could you please show where the code should be?

Ps, I found it. Another question is if it's possible to give my video box rounded edges? 

[ALY02SA]

Do you happen to know how to center the text? At the moment it sits on the left.Thank you

[theparmesan_don]

Hi, I am still not able to see it on mobile mode. Also is there any way to be able to change the color of the background, etc. so it matches the other themes on my site? This is so amazing, I am nearly there! Thank you 🙂

[KetanKumar]

@theparmesan_don oh sorry for that issue can you please share more details for this issue also can you please share store url

[forbidenarea]

Hi @KetanKumar i have tried @vincentdh solution above:

• adding a new css called "component-video-with-text.css"

• adding your short code to the bottom of "base.css" file 

• adding a new section called "video-with-text.liquid" - this fails to save with the error below:

'"Invalid preset "Video with text": cannot include blocks in preset because there are no blocks defined."'

Any ideas what the problem is please? you help is much appreciated. thank you

[MAISU]

Awesome, thank you so much!

I have just one question: I would like to display a different video for each product I'm selling. Thus, I have added the "Video with Text" section to the Product page and would like to insert the video that I've uploaded to the product metafield. My issue: The metafield "file" doesn't appear, so I tried to add a new "URL" metafield to include the URL in the box. Unfortunately, this URL metafield doesn't appear nor does the file metafield. 

Any idea how I can achieve the desired outcome?

[imandco]

Hello. The section is showing on product page only. How can I have it on home page instead?

[Teed]

I'm not getting sound out of the video. Anyone else have that problem?

[Spac-es]

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

Remove the muted="" attribute from this code or set it to muted="false" to enable sound in your videos.

[bakerboy]

Hi Ketan,

I used this accepted code in my Publisher theme but the video I want to add is YT hosted and I dont have it as a file. Is it possible to edit the code to allow yt linking instead of shopify uploaded video?

[ALY02SA]

@KetanKumar do you happen to have/know how to centre the text (image description) for this video with text?

[KetanKumar]

@ALY02SA yes please  share your store url  so i will check and let you know proper solution 

[ALY02SA]

store url; mysticmoods.co.uk. I have not added the section as the writing is not where it should be (centered). Also' would you happen to know how to get rid of the padding - move the video at the very left ' with no padding. Thanks 

[ALY02SA]

@KetanKumar store url; mysticmoods.co.uk. I have not added the section as the writing is not where it should be (centered). Also' would you happen to know how to get rid of the padding - move the video at the very left ' with no padding. Thanks 

[KetanKumar]

@ALY02SA thanks for details can you please add this section 

[ALY02SA]

@KetanKumar I believe you forgot to add the section?

[baregamyan]

maybe you know how to make video bigger? Because on desktop it is too small.

[Spac-es]

You should be able to easily change the size of the section from the customize panel of your Shopify store:

If this is not the case, you should include it in your code. Add it to the grid element: {{ section.settings.height }} (like the following lines): 

      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">

      
<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 }}">

Add code in the schema section to be able to make the change from the "customize" panel:

    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },

However, make sure that the dimensions of the video are correct.

[FOP]

Hi @KetanKumar

Are you able to assist with the below:
- There is a lot of padding at the top and bottom of the video section, how can we remove this?

- We would love for the text portion to have a coloured background
- How can we have the video reach the left corner so it is taking up the whole side rather than it just being surrounded by white space?

my url is www.thefreedomofpeach.com.au

Many Thanks,

Natalie

[KseniiaDenysova]

Hi Vincentdh, 

Thank you for your code, but somehow it works only on desktop and not on mobile. How can I switch it on mobile?

[nafisapnd]

THANK YOU SO SOOOOO MUCH, lifesaver! Spend HOURS looking for this!

[KetanKumar]

@nafisapnd 

its our pleasure to help us 

[Paile]

Hey Ketan, 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 😉

[chemtai2000]

You just made my day with this code. Thank you so much!

[KetanKumar]

@chemtai2000 

can you please share store url so i will check and let you know 

[mitzvahraps]

Just found this and it is super helpful. Thanks a million @vincentdh

I uploaded an MP4 video ad while it's playing, there is no sound. As our site requires audio (we're selling music), is there any way we can add sound into the video?

mitzvahraps.com / Mambonumber5!

[mitzvahraps]

This is awesome. Thanks!

I uploaded an MP4 video and while the video works, there is no sound. As our site requires audio (we're selling music), is there any way we can add sound into the video?

mitzvahraps.com / Mambonumber5!

[DraxP]

Heya vincent!

I followed the steps you gave and used the code and the section appears fine, However when I past in the youtube url I want to use nothing comes up, any way to get around this?

thank you

[piotr101101]

Hello,
thank you for the code! I have an issue: when I pick a color variant of my product, the video stops playing. Do you have any solution for that issue? Thanks!

[Spac-es]

 👉 Re: Dawn Theme - Sección de video con texto - Shopify Comunidad 

[bandg]

hi!! I've been following this thread and your code works perfectly on desktop however on mobile, i need to press the "play" button for it to appear, otherwise its just a huge blank space. Any help on this? I tried adding autoplay="true" in line 7 of video-twith-text section but it just froze the whole thing on desktop and mobile.

[Spac-es]

I think the autoplay event is blocked on mobile devices for security... You can find out more here.

[bandg]

Nevermind, I got it working now on mobile. The image shows up and it's not autoplay but im ok with that. 

Code I used below:

<video style="max-width: 100%; height: 100%;" id="videoPlayer" loop="loop" autoplay="true" webkit-playsinline="" playsinline="">

[meryhd]

hello! I want a video that plays automatically, i want delete the voice icon and pause icon, i want the button URL in this color #FF0000 and i want to center text and video(800 × 800px) with rounded corner... please can you edit the code to give result exactly like this (but a video In the place of image) :

[baregamyan]

Maybe you can help me to make size of this block bigger?

[KetanKumar]

@baregamyan 

oh sorry for that issue can you  please share store url so i will check and let you know

[iamabeginner]

You deserve a medal of honor.

[Alex365]

I added everything you said. Now on every page I am publishing, the video with text appears 🙈. Does anyone have a solution for this problem? it seems like the code tells to add it to every page, but i can not find it. 

[Barb111]

I'm confused, how do you add in the section with video & text after adding these sections and codes?

[Alex365]

huh? could u maybe explain more?

[eCommtique]

Thanks so much for sharing this!

[millermarket]

Thank you

[ChodaBRO]

Thanks!!