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

[ed_bb]

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.

[websensepro]

Hy, @ed_bb 

please send page URL

[ed_bb]

Hi @websensepro 

It's :

baileybespoke.co.uk

Thanks.

[websensepro]

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

[ed_bb]

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

https://baileybespoke.co.uk/

Thanks.

[ed_bb]

Like this.

[websensepro]

you want this container on top left 

[ed_bb]

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]

do to want this one styling

[ed_bb]

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]

its fine now

[ed_bb]

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

Thanks.

[websensepro]

[ed_bb]

Yes! 🙂

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

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

[ed_bb]

Thank you very much indeed 🙂

Enjoy the rest of your day!

[ed_bb]

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.

Thanks.

[ed_bb]

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

[beyondstore]

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

[ed_bb]

@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!