Jump to content

Need Help Styling Video

Recommended Posts

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!

 

Screenshot 2024-04-11 at 18-38-36 Home (Draft) — SLATE.png

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

 

Screenshot 2024-04-11 at 18-38-36 Home (Draft) — SLATE.png

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

image.thumb.png.662188c963956549a37a7bf293dc3a19.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
8 hours ago, Beyondspace said:

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

image.thumb.png.662188c963956549a37a7bf293dc3a19.png

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;
}
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.