Jump to content

How to remove black bars above and below the front page auto play video on Squarespace 7.0?

Recommended Posts

Really loving the ability to have an autoplay video as the front page of the website.

Though, there are black bars above and below the video when in mobile mode. The video plays fine but these black bars are messing with the logo, etc. It's like there is some padding, spacing, or formatting problem.

On tablet and desktop it looks amazing and there are no black bars.

How can these bars be removed?

This is using a Vimeo video. 1920 x 1080. Link: https://vimeo.com/789530662 

If I use the link only it does not autoplay.

Here is the embed code:

<!-- Code for Vimeo auto play v1.1 -->

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe allow="autoplay; fullscreen" allowfullscreen src="https://player.vimeo.com/video/789530662?background=1&amp;wmode=opaque" style="background-color: #    #0D0D0D;position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0">
  </iframe>
</div>

 

Screen Shot 2023-01-28 at 1.53.11 PM.png

Screen Shot 2023-01-28 at 1.53.30 PM.png

Link to comment
  • Replies 1
  • Views 968
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Figured it out!

 

Here is what I put in my Custom CSS

 

/* Ensure autoplay vide embeds do not have space above and below */
@media only screen and (max-width: 768px)
.collection-type-index.design-slideshow.slideshow-aspect-ratio-169-widescreen .index-gallery {
    padding-bottom: 56.25%;
}

 

This video was super helpful: https://youtu.be/_U-mTKdX0D4?t=256

 

As was this post: https://forum.squarespace.com/topic/168411-need-help-resizing-height-of-gallery-sections-in-version-71/

 

So it looks like you just need to find the place that will make the desied changes. Then add a custom CSS bit to change it every time.

 

Also I think the "@media only screen and (max-width: 768px)" is what triggers the mobile behavior. 

Screen Shot 2023-01-28 at 3.23.54 PM.png

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.