Fill screen with a background video section (Brooklyn theme)

Highlighted
New Member
1 0 1

Hi everyone,

I'm currently using the Brooklyn theme and would like help on enlarging the first section on my homepage.

The section has a background video and I'm currently facing two issues:

1) The video width is fine on normal monitors, but on some others (like ultrawides) it doesn't resize properly and leaves white bars to the left and right

2) The section height – even though I set the section to "large," I might need to custom code it so that the section responsively fills the entire screen instead of just a little more than half

This is the link to the store:

https://auralumina-com.myshopify.com/

Any help would be appreciated, thanks!

1 Like
Highlighted
Astronaut
1082 178 213

Hello,

Using a Vimeo video this is not possible, it comes with a maximum width set up already.

You'd need to code a custom section onto your theme to use an uploaded video instead of a vimeo/youtube video.  Since it would require Liquid/CSS/Javascript knowledge to implement this feature, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with these technologies you'll need to hire a Shopify developer to assist you. 

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
7507 1037 2603

Hello, @auralumina 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

#shopify-section-1596921734968 .ImageHero--large {
min-height: 100vh;
}

 

see result 

KetanKumar_1-1596947502926.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes