Why isn't the video hero section playing in the Story Theme?

Technical Q&A
1

Hi!

I’ve added a video hero section to the Story Theme but it doesn’t seem to be playing the linked video as background. Maybe there is a problem with the css.theme or something I should add.

Website: https://wwaca.myshopify.com/

Password: website

WearBasics_1-1615480972952.png
WearBasics_1-1615480972952.png1920×698 63 KB

2

Hi @WearBasics ,

To show video, you need to add embedded content. You can add this snippet in this class name “animation-cropper”

Please take a look at the screenshot here: https://prnt.sc/10ji6h9

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
3

I just added the snip but it still doesn’t work. I would think there is something missing in the code.

Maybe you can give me a direct hand in the coding?

4

Hi @WearBasics ,

So can you try this:

  • In your file "theme.scss.liquid”, please paste this code:

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

  • Regarding you module hero, please embed this video:

So please let me know when you finish or if you have any questions or need further support, I will help you.