When you are on our website www.mysmarterhome.com and scroll down you will find that our hero video that plays at the bottom of the page has a subtle shadow in the center of the video. After doing some testing I realized this is due to the fact that normally that shadow is supposed to be centered behind the text. Because our video does not have text it just appears in the center of the screen. If I use the text alignment tool and move where the text would be aligned the shadow moves to that area too.
Because we have no text I want to get rid of this shadow altogether but none of the Video Hero options give a way to do this. How can I resolve this issue?
See the attached screenshot to see how the shadow is appearing in the hero video.
Hello @RyanQuinlan 
In Shopify Admin, you can go to Themes, Edit code, open file theme.css (or theme.css.liquid, theme.scss, theme.scss.liquid) and add this code snippet at the bottom
.hero__text-shadow {
display: none;
}
Hope that helps!
Hi @RyanQuinlan
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
-Go to Online Store->Theme->Edit code
-Asset->theme.css paste the below code at the bottom of the file.
[data-section-id=“template–16029383229686__165110003424c8649a”] .hero__text-wrap .hero__text-shadow{display:none !important}
Hope my solution works perfectly for you!
Best Regards;
PageFly
I had done this but it did not seem to remove it on our page, could it be that I need to format the code once I paste it rather than all the code you gave just being in a straight line at the bottom?
This did it! One side effect I noticed however is that any text on any other hero videos we have has now disappeared. Is there a way to remove just the shadow without removing the text as well?
you can replace it by
#shopify-section-template–16029383229686__165110003424c8649a [data-section-id=“template–16029383229686__165110003424c8649a”] .hero__text-wrap .hero__text-shadow{display:none !important}
