Jump to content

Black Space Below Embedded Video

Go to solution Solved by Beyondspace,

Recommended Posts

Posted (edited)

Hello! I've been trying to work out this issue with my Squarespace site for the longest time. Black space appears below a Vimeo embedded video on my page hero. It's not margin or padding, nor is the block too short to cover the full height.

I've tried many different approaches with custom code but none of them seem to work. This issue is present only on mobile (below 768px).

Any ideas on how I could solve this are welcome. I'll be happy to provide any additional info or code you need from me.

Thanks in advance!

Link to the website/page: https://steerforward.com/case-study

Screenshot 2024-05-28 at 19-37-37 Case of Study — Steer.png

Edited by ThomasDes
Link to comment
18 hours ago, ThomasDes said:

Hello! I've been trying to work out this issue with my Squarespace site for the longest time. Black space appears below a Vimeo embedded video on my page hero. It's not margin or padding, nor is the block too short to cover the full height.

I've tried many different approaches with custom code but none of them seem to work. This issue is present only on mobile (below 768px).

Any ideas on how I could solve this are welcome. I'll be happy to provide any additional info or code you need from me.

Thanks in advance!

Screenshot 2024-05-28 at 19-37-37 Case of Study — Steer.png

Can you share your URL so I can check it?

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
  • Solution
On 5/29/2024 at 5:39 AM, ThomasDes said:

Hello! I've been trying to work out this issue with my Squarespace site for the longest time. Black space appears below a Vimeo embedded video on my page hero. It's not margin or padding, nor is the block too short to cover the full height.

I've tried many different approaches with custom code but none of them seem to work. This issue is present only on mobile (below 768px).

Any ideas on how I could solve this are welcome. I'll be happy to provide any additional info or code you need from me.

Thanks in advance!

Screenshot 2024-05-28 at 19-37-37 Case of Study — Steer.png

You can try the following custom CSS

@media only screen and (max-width: 767px) {
  section[data-section-id="6639022d0cfdda1b60124005"] .intrinsic-inner {
	padding-top: 170%
  }
} 

 

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
  • 2 weeks later...
On 5/30/2024 at 12:33 PM, Beyondspace said:

You can try the following custom CSS

@media only screen and (max-width: 767px) {
  section[data-section-id="6639022d0cfdda1b60124005"] .intrinsic-inner {
	padding-top: 170%
  }
} 

 

THANK YOU! I adjusted it for what I needed and ended up with this:

  @media only screen and (max-width: 420px) {
  section[data-section-id="6639022d0cfdda1b60124005"] .intrinsic-inner {
    padding-top: 20%
  }
}

Worked like a charm. Thanks.

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.