white spaces above and below an embedded vimeo

Store Design
1

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

I’ve tried using Fixed size and responsive, and it creates the same white spaces.

2

@Nograd

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

3

@Nograd

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi, https://nogradisrael.com/

5

@Nograd

Thanks for it

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
#shopify-section-161350986014880d99 .text-center div {
    padding: 0 !important;
}
#shopify-section-161350986014880d99 .text-center div.video-wrapper {
    padding-bottom: 37.25% !important;
}
6

@Nograd

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file.

#shopify-section-161350986014880d99 .video-wrapper { display: contents;}

Hope this will work for you.

Thanks!

7

yeah thank you mate! that solved it ?

8

Hi. I added this code to the bottom of my assets/theme.scss.liquid as stated to do, but it did not eliminate the white space above and below my embeded videos. The space is only added on a few of the videos but not all of them. Is there some other code that needs to be changed? Thank you!