How can I add text to a custom liquid background video on Dawn 7.0.1?

[scotticus]

Hello,

I have a custom liquid background video and would like to add some text at the centre but not sure how to code this?

Can someone help.

Thank you so much

https://silicorestudios.com/

[GemPages]

Hello @scotticus 
Glad to help you today.

Regarding your problem, you can try some codes that are recommended by this blog : https://blog.hubspot.com/website/video-background-css

Hope my recommendation can work and support for you!
Best regards,
GemPages Support Team

[PageFly-Victor]

Hi @scotticus ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code below:

<div class="all-form-field" style="display:flex; width: 100%";>

<div class="form-field">

<label class="Form-label">Delivery Suburb <span class="red-asterisk">*</span></label>

<input class="form-input form-input-placeholder"

type="text"

id="Delivery Suburb"

name="contact[delivey suburb]"

autocomplete="city"

aria-required="true"

aria-invalid="true"

required

>

</div>

<div class="form-field">

<label class="Form-label">Post Code <span class="red-asterisk">*</span></label>

<input class="form-input form-input-placeholder"

type="number"

id="Post Code"

name="contact[post code]"

autocomplete="postcode"

aria-required="true"

aria-invalid="true"

required

>

</div>

</div>

Hope this answer helps.
Best regards,
Victor | PageFly

[Cedcommerce]

Hello @scotticus, 

To fix this issue, you need to add the below-provided code in your custom liquid section.

<style>

video {    

   display: block;

   margin: 0 auto;

   width: 100%;

   height: 50%;   

} 

@media (max-width: 749px) {

   .small--hide {

     display: none !important;

   }

}

@media (min-width: 750px) {

   .medium-up--hide {

      display: none !important;

  }

}

.container {

 position: relative;

 text-align: center;

 color: white;

}

.centered {

     position: absolute;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -50%);

     font-size: 30px;

}

</style>

<div class="container small--hide">

   <video class="small--hide" autoplay="" loop="" playsinline="" muted="">

       <source src="https://cdn.shopify.com/videos/c/o/v/a72cf8e0d7914ac585b636e85115f6c1.mov">

   </video>

   <div class="centered">Your text goes here for desktop</div>

</div>

<div class="container medium-up--hide">

 <video class="medium-up--hide" autoplay="" loop="" playsinline="" muted="">

  <source src="https://cdn.shopify.com/videos/c/o/v/8d8e30c2d98c4859beeceb1dbd54fc1f.mov">

 </video>

 <div class="centered">Your text goes here for mobile</div>

</div>

Note - In case you do not have experience handling Shopify themes, or liquid codes, we suggest you to hire a Shopify expert who can get this done for you. 

Hope it helps. Let us know if you need further help with the issue.

Regards, 

CedCommerce