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

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.

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

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.

Store URL: fxags.myshopify.com

Page URL: https://fxpopup.com/products/eva-production-unit-01-backpack

Thank you very much.

Page URL: https://fxpopup.com/products/eva-production-unit-01-backpack

Thank you very much.

@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

1 Like

It worked out great! Thanks for the help!

What about the product page Please ?

@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

1 Like

Thank you,

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

Could you help adjust it on the desktop?