How can I center and color white the text overlay on my video?

[DanyelleM]

Hi,

I’m trying to add a video with text overlay to my store which I done successfully, but I need the text to be centred and the font to be coloured white.

The video and text also needs to fit mobile view as well as full screen/ desktop.

See photo for reference

The code I have used in custom html is as follows

{{ precious moments }}

Your text goes here

The code is used in theme scss is as follows

.video-container {

position: relative;

}

.video-background{padding-top: 55px;}

.video_text {position: absolute;z-index: 9999;top: 50%;font-size: 25px;padding: 10px;}

@media only screen and (max-width: 767px) {

.video_text{top: 5%;font-size: 12px;}

}

[made4Uo]

I am a little confuse with your code. Where is the

tag? The most Precious Journey? If so then your container will be the header tag (not sure why you use a header tag). I am just trying to understand your code without using DevTools. If the CSS code is all you have then this might work.

Try this margin auto to absolute positioned items. Please replace your code for the video-text with this.

.video_text {
position: absolute;
z-index: 9999;
font-size: 25px;
padding: 10px;

top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}

or you can you transform translate.

.video_text {
position: absolute;
z-index: 9999;
top: 50%;
font-size: 
25px;
padding: 10px;

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

Just want to share this slideshow with 11 unique designs as well. It does include a video overlay.

Add a Slideshow with More than 10 Designs to Any Shopify Theme - No APP needed

[DanyelleM]

@made4Uo
thanks for your reply, the photo I added is that I want the video to look like.

with the code I displayed the video looks like this:

Im a complete newbie, so learning as I go along. The code I’m using is one I found in this community, I will try out code you’ve suggested and check out YouTube video, thanks