How can I add a CTA Button over a looping video on the Debut Theme?

[illece]

Hello,

I have two questions:

1.) I would like to add a CTA Button over a looping video. How would I go about doing this?

2.) I placed a text overlay as a placeholder, but when I view the page on mobile, the text no longer becomes centered.

Link to my website is: www.illece.com

Thank you,

[IttantaTech]

@illece 

can you please provide video section code so we're update code.

[illece]

Hello,

I added the code blow under theme.scss.liquid

// Header Video CSS

.video-background {
width: 100%;
height: auto;
left: 0;
top: 0;
}

.template-index #shopify-section-1555664398945 .page-width {max-width: initial !important;}
.template-index .main-content{padding-top: 28px;}

@media only screen and (min-width: 750px){

#shopify-section-1551278267809 .section-header {

margin-top: 20px;

}

}

.video_text{color: white; position: absolute; z-index: 9999; left: 50%; top: 50%; font-size: 25px;}

Here is the custom html I put into the section:

<span class="video_text">illece</span>

<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="https://cdn.shopify.com/s/files/1/2693/7888/files/Illece_Wave_Intro_Compressed.mp4?v=1592525405" playsinline="" style="transform: scale(1.27563, 1.27563);">
<source type="video/mp4" src="https://cdn.shopify.com/s/files/1/2693/7888/files/Illece_Wave_Intro_Compressed.mp4?v=1592525405">
</source></video>

[IttantaTech · Accepted solution]

<span class="video_text">illece
<a href="put the link here" class="btn">CTA Text Here...</a>
</span>

<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="https://cdn.shopify.com/s/files/1/2693/7888/files/Illece_Wave_Intro_Compressed.mp4?v=1592525405" playsinline="" style="transform: scale(1.27563, 1.27563);">
<source type="video/mp4" src="https://cdn.shopify.com/s/files/1/2693/7888/files/Illece_Wave_Intro_Compressed.mp4?v=1592525405">
</source></video>

update  this code

[illece]

Thank you! The button shows up. A few follow up questions...

- It appears the button is still not centered, is there a way to center it? (also evident when viewing from mobile) I've tried adding <center> </center> but it does not work.

- If I wanted to change the color of the button and text, how would I go about it? (edit: Through theme settings -> colors?)

- Lastly, a minor detail but is there a way to stretch the video to be full width? I believe the width is currently set at 100%, but there are still some spacing on the sides.

Thank you so much for your help!

[IttantaTech]

@illece 

update this css

.video_text {
color: white;
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 50%;
    font-size: 25px;
    text-align: center;
    right: 0;
}

[illece]

Worked like a charm, thank you!

[IttantaTech]

@illece 

I have done full with video, please check.

[illece]

Thank you so much!

May I ask what you changed/updated?

[IttantaTech]

@illece