Lumenarius Posted January 28 Share Posted January 28 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&wmode=opaque" style="background-color: # #0D0D0D;position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"> </iframe> </div> Link to comment
Lumenarius Posted January 28 Author Share Posted January 28 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment