Button and Text not showing on embedded video (Debut theme)

[Jeyswank]

Hey guys,

As the 20mb video limit was quite restricting for our store, we embedded a video using Imgur.

However, now the overlay text and "shop now" button appear at the bottom of the video instead of centered in the middle. Anyone have any ideas?

https://shopcyd.com/

[diego_ezfy · Accepted solution]

@Jeyswank  Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

.content--centered{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.content--centered *{
    text-align: center !important;

}

.homepage-image{
    position: relative;
}
.homepage-image:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .2;
}

@media (max-width: 767px){
    .homepage-image{
    font-size: 12px;
}
}

Please let me know whether it works.

Kind regards,
Diego

[Jeyswank]

Thank you so so much! Any ideas on how to change font size and color?

[diego_ezfy]

@Jeyswank you're welcome!

To change font-size on mobile just change the value 12px to any value you want.
To change color, change the word white to any hex color you want, like #cccccc


For other specific changes it would require more customization, feel free to contact me personally if you need it.

Kind regards,
Diego