Need Help Styling Video

I've spent all day trying to upload a video to my website. It's a 1:1, 1080p, 30s video. When I upload it as a video block, it crops it as 16:9 and leaves two huge spaces to the sides. I tried fixing it with padding-bottom in custom CSS but it wouldn't work. I tried using a code block and embed, but none of those will work.

No matter what method I use or what code I add, I can't seem to get rid of this blank space that appears between the video and the end of the section. It's not margin or padding. I've tried position:absolute - position:relative: - grid-gutter:0, height:auto - height: (760px, 810px, 1080px) - etc. Nothing worked.

If you know the solution to this please let me know and any ideas are welcome. I can send you the custom CSS, or any piece of information you need.

You'll see the rest of this page is a mess because it's a duplicate we aren't using. Link is https://www.theslatestudio.com/home-draft
 

Thanks in advance!

8 hours ago, ThomasDes said:

I've spent all day trying to upload a video to my website. It's a 1:1, 1080p, 30s video. When I upload it as a video block, it crops it as 16:9 and leaves two huge spaces to the sides. I tried fixing it with padding-bottom in custom CSS but it wouldn't work. I tried using a code block and embed, but none of those will work.

No matter what method I use or what code I add, I can't seem to get rid of this blank space that appears between the video and the end of the section. It's not margin or padding. I've tried position:absolute - position:relative: - grid-gutter:0, height:auto - height: (760px, 810px, 1080px) - etc. Nothing worked.

If you know the solution to this please let me know and any ideas are welcome. I can send you the custom CSS, or any piece of information you need.

You'll see the rest of this page is a mess because it's a duplicate we aren't using. Link is https://www.theslatestudio.com/home-draft
 

Thanks in advance!

 

Have you fixed it yet? I check it works properly on my device

8 hours ago, Beyondspace said:

Have you fixed it yet? I check it works properly on my device

I don't want to mark it as solution because it's a mess and there has to be a simpler way, but I fixed it with this code:

.video-block .video-player{
padding-bottom:43.7% !important;
}

// Negative margin to the section below
section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-1% !important;
}

@media screen and (min-width:1900px) and (max-width:18000px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-1% !important;
}
}

@media screen and (min-width:1776px) and (max-width:1800px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-1% !important;
}
}

@media screen and (min-width:1621px) and (max-width:1665px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-5% !important;
}
}

@media screen and (min-width:1665px) and (max-width:1776px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-3% !important;
}
}

@media screen and (max-width:1620px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-7.5% !important;
}
}

@media screen and (min-width:1440px) and (max-width:1520px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-11% !important;
}
}

@media screen and (min-width:1520px) and (max-width:1572px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-9% !important;
}
}

@media screen and (max-width:1440px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:-12% !important;
}
}

@media screen and (max-width:768px){
  section[data-section-id="65b7c774c34932293d538290"]{
  margin-top:0 !important;
}
}