Solved

How to adjust the text overlay position in a video background using Dawn theme?

ed_bb
Excursionist
36 1 2

Hi,

I have created a video background using this code I found online :

 

 

<div class="hero">
  <div>
  <h1>{{ section.settings.heading }}</h1>
  <a class='button' href='{{ section.settings.link_url }}'>{{ section.settings.link_text }}</a>
  </div>
  <video class="video-bg" autoplay muted loop playsinline poster={{ section.settings.poster }}>
  	<source src={{ section.settings.video_url }} type='video/mp4'>
  </video>
</div>

{% schema %}
  {
    "name": "Video Background Banner",
    "settings": [
      {
      "type": "text",
      "id": "heading",
      "label": "Overlay text"
    },
      {
      "type": "url",
      "id": "video_url",
      "label": "Enter the video url here"
    },
    {
      "type": "image_picker",
      "id": "poster",
      "label": "Add fallback background image in case video doesn't load"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Enter CTA button text (if required)"
    },
      {
      "type": "url",
      "id": "link_url",
      "label": "CTA button link page"
    },
    {
      "type": "range",
      "id": "blur",
      "min": 0,
      "max": 10,
      "step": 0.1,
      "unit": "px",
      "label": "For low quality video add blur",
      "default": 0
    },
    {
      "type": "range",
      "id": "opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Change video opacity",
      "default": 1
    }
],
  "presets": [
    {
      "name": "Video Background Banner"
    }
  ]
  }
{% endschema %}

<style>
.video-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    filter: blur({{section.settings.blur}}px) opacity({{section.settings.opacity}});
}
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    margin-bottom: 50px;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
  }
.hero div {
    padding: 1.5em;
    background: hsl(0 100% 100% / 25%);
    backdrop-filter: blur(10px);
  }

</style>

 

 

The video works and all looks fine but the text overlay is central to the video and doesn't look how I want. How would I go about changing the text overlay position to top left corner with a white box/background for the text, please?

 

Thanks.

Accepted Solution (1)
websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

.hero {
    display: flex;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.hero > div {
    width: 43rem;
    padding: 20px 1%;
    height: 50%;
    background-color: white;
    margin-top: 2%;
    margin-left: 2%;
}
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 19 (19)

websensepro
Shopify Partner
1014 139 147

Hy, @ed_bb 

please send page URL

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

Hi @websensepro 

 

It's :

baileybespoke.co.uk

 

Thanks.

websensepro
Shopify Partner
1014 139 147

i can't find the video section please send me page URL in which there you add the video

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

It's the main video banner on the home/landing page @ 

https://baileybespoke.co.uk/

 

Thanks.

ed_bb
Excursionist
36 1 2

Video-Banner.PNG

 

Like this.

websensepro
Shopify Partner
1014 139 147

you want this container on top left 

websensepro_0-1701248301447.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

Hi @websensepro 

 

Yes, correct.

However would ideally prefer it to be a white background box or just text and button with no background box for the text.

Thanks.

websensepro
Shopify Partner
1014 139 147

do to want this one styling

websensepro_0-1701248788925.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

Almost, would want it top left floating so not touching the top of side if that makes sense?

 

Also, is there anyway to make the text run over 2 lines instead of the box being wider?

 

Thanks.

websensepro
Shopify Partner
1014 139 147

its fine now

 

websensepro_1-1701249839968.png

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

In from the left slightly, box more square than rectangle, please.

 

Thanks.

websensepro
Shopify Partner
1014 139 147

websensepro_0-1701250336315.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

Yes! 🙂

 

Looks good, thank you. Could you advise on code?

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

.hero {
    display: flex;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.hero > div {
    width: 43rem;
    padding: 20px 1%;
    height: 50%;
    background-color: white;
    margin-top: 2%;
    margin-left: 2%;
}
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
ed_bb
Excursionist
36 1 2

Thank you very much indeed 🙂

Enjoy the rest of your day!

ed_bb
Excursionist
36 1 2

Sorry, one more question....

 

How do I make it so the white box is contained within the limits of the page/screen on mobile?

 

See screenshot - the right side hangs over the edge of the screen but want it to look like the left side does, please.

 

IMG_E1243.JPG

 

Thanks.

ed_bb
Excursionist
36 1 2

Don't worry - I've sorted. Thanks.

beyondstore
Tourist
6 0 3

Do you happen to know how to add a video background to your actual header section in dawn theme?

ed_bb
Excursionist
36 1 2

@beyondstore Apologies, I do not. I know the Motion theme has it as standard as do some others but not code I have I'm afriad. I wish I did!