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
36889 3640 11984

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)
Spac-es
Shopify Partner
369 107 128

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

 

 

video.jpeg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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.

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

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
Shopify Partner
369 107 128

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:

 

3.PNG

 

 

1.PNG

 

 

 

2.PNG

 

 Fix Elementor Video Autoplay not Working on Mobile

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
willayy
Visitor
1 0 0

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
Shopify Partner
369 107 128

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

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
369 107 128

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:

 

WhatsApp Image 2024-02-17 at 14.44.58.jpeg

 

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Ivan_58
Visitor
1 0 0

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? 

forbidenarea
Tourist
4 0 3

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
Tourist
6 0 0

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?Bildschirmfoto 2023-08-16 um 20.23.34.png

imandco
Tourist
19 0 1

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

Teed
Tourist
3 0 0

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

Spac-es
Shopify Partner
369 107 128
        <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.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
369 107 128

 

 

 

 

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

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?

baregamyan
Visitor
2 0 1

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

123.png

Spac-es
Shopify Partner
369 107 128

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

Sin título.png

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.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
FOP
Explorer
114 0 17

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
Shopify Partner
10 0 2

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
Tourist
5 0 1

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

KetanKumar
Shopify Partner
36889 3640 11984

@nafisapnd 

its our 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
Paile
Excursionist
18 2 3

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
Visitor
1 0 1

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

KetanKumar
Shopify Partner
36889 3640 11984

@chemtai2000 

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

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
mitzvahraps
Tourist
3 0 0

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
Tourist
3 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

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
Shopify Partner
369 107 128

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

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

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
Shopify Partner
369 107 128

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

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

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
Visitor
3 0 0

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
Visitor
2 0 1

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

123.png

KetanKumar
Shopify Partner
36889 3640 11984

@baregamyan 

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

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
iamabeginner
Excursionist
11 0 6

You deserve a medal of honor.

Alex365
Tourist
12 0 1

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
New Member
8 0 0

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

Alex365
Tourist
12 0 1

huh? could u maybe explain more?

eCommtique
Visitor
1 0 0

Thanks so much for sharing this!

millermarket
Visitor
1 0 0

Thank you

ChodaBRO
Tourist
8 0 0

Thanks!!

glowyglowtea
Visitor
1 0 0

Hi!!! This worked wonderfully however on mobile it is blank and any suggestions below did not work... can anyone help please?

Gumf
Shopify Partner
25 1 1

Can't thank you enough for this! 

Gumf
Shopify Partner
25 1 1

If anyone is having the problem of the video not displaying on mobile just add this code to the bottom of the 'component-video-with-text.css' file:

@media screen and (max-width: 740px) {
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    display: block;
   position: relative;
}
}

sumanbhat
Explorer
60 1 20

 hi @vincentdh  can you please le me know which theme you using? for the myblend . please

 

KetanKumar
Shopify Partner
36889 3640 11984

@sumanbhat 

Dawn Theme 

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

whereswaldo
Tourist
5 0 1

The audio on the video with text doesn't work on my website, anyone know how to fix that?

mitzvahraps
Tourist
3 0 0

@whereswaldo you'll need to go into the `video-with-text.liquid` file and add in a small piece of code. 

Do a CTRL+F (or COMMAND+F) and search for "<video style" to see the line I'm referring to below. You'll want to add in the instructions 

 

controls = "true"

 

this will allow the video controls to appear. 

 

The whole line should look like this

 

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

<source src="{{ section.settings.video_url }}" type="video/mp4" />

</video>

 

firststop
Excursionist
24 0 11

This code worked for desktop, but the video doesn't show up for mobile. 😞 Any ideas why?

Spac-es
Shopify Partner
369 107 128

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

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!