white spaces above and below an embedded vimeo (Brooklyn theme)

Solved
hugon789
Excursionist
19 0 5

Im using Brooklyn theme, and every time I embed a vimeo video to the home page it creates big white spaces above and below the video.

What should I do? Thank you in advance.

Video space technical problem.jpeg

0 Likes

Hello @hugon789,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
Natztech
Shopify Partner
2145 548 1304

hello @hugon789 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

0 Likes
hugon789
Excursionist
19 0 5
hugon789
Excursionist
19 0 5

This is an accepted solution.

@hugon789, do this to fix it in 20 seconds:

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

@media (max-width: 767px){
    .product-single__description iframe[src*='vimeo']{
    max-height: 50vw;
    margin-top: 10px;
}
}



Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
hugon789
Excursionist
19 0 5

It worked out great! Thanks for the help!

0 Likes
Redageek
New Member
2 0 0
What about the product page Please ?
0 Likes

@Redageek, 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, timber.scss or theme.css (it varies from theme to theme) and paste this at the bottom of the file:

 

@media (max-width: 767px){
     iframe[src*='vimeo']{
    max-height: 50vw;
}
}

 



Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
Redageek
New Member
2 0 0

Thank you,

it worked on the mobile-only, my theme is Brooklyn

Could you help adjust it on the desktop?

0 Likes