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 :

  

  # {{ section.settings.heading }}
  {{ section.settings.link_text }}
  

  

{% 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 %}

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 :

Bailey Bespoke | Demi-Fine & Bespoke Jewellery

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]

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