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,
Solved! Go to the solution
can you please provide video section code so we're update code.
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>
This is an 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
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!
update this css
.video_text { color: white; position: absolute; z-index: 9999; left: 0; top: 50%; font-size: 25px; text-align: center; right: 0; }
User | Count |
---|---|
519 | |
210 | |
129 | |
79 | |
45 |