Vid block has unwanted grey border on mobile application

Site URL: https://wolverine-magenta-733g.squarespace.com/

Hi there,

I'm using the following embed data to host an infinite loop, HD video from vimeo on the de-facto landing page i've created:

<pre class="source-code"><div><div style="padding:0% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/535604908?background=1;autoplay=1;loop=1;title=0;byline=0;portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script></div></pre>

The landing page has hidden header and footer with the following injected css ([landing page]/settings/advanced/header css injection):

<style>
   #footer, #preFooter {
      display: none;
    }
  </style>
 <!-- Hide header & navigation --> 
  <style>
  #header { display: none }
   > #siteWrapper {background-color:#ffffff !important;}
  </style>
 <!-- Hide announcement bar -->
 <style>
  .sqs-announcement-bar { 
  display: none !important 
  }
 </style>

This a huge solve for me as I found the Cover Page builds to only offer background videos at 720P with a 6s full resolution delay.

Trouble is now, on mobile, my video position floats to the top (a problem I'm posting about on another thread), AND has a grey shadow/border around my vid box when using with my actual cell phone (with a recently cleared history/cache).

I've taken this up w 3 separate SS helpline associates, each with a newer iPhone than mine/myclient's, and each rep claim to see no such border. Also, when in the site editor on my laptop here, in the mobile preview mode, no such border exists.

Apologies for the grainy image, the screenshot was taken by my laptop, of my phone, because when a screenshot is taken on my phone, THE GREY BORDER DOESN'T EVEN SHOW UP IN THE SCREENSHOT.

Any help in ghost busting this problem is appreciated_

Hi anybody,

Is there a way to Bump up my question here on the thread?

Thanks so much_

Have you tried adding top-padding to the specific block ID?   I'm no SquareSpace expert but learning more each week.  Looking at your site, this might help.   

@media screen and (max-width:767px) { 
#block-e1529efedc90a5acf0e0 .sqs-block .video-block .sqs-block-video
{ padding-top: 200px; }
}

Thanks so much for your response @Summit227 !

I tried plugging this code into my Design/Custom CSS port, but no avail, the video is still presenting me with the dark grey border around my vid block, and is still floating to the top of my mobile screen. I tried playing with the padding-top, and adjusting it to 400, then 800px, but nothing. Perhaps it's the #block number that we've gotten wrong? Also,,, where did you find that #block number..?

Thanks again!

thanks

On 5/8/2021 at 8:19 AM, SRD said:

Thanks so much for your response @Summit227 !

I tried plugging this code into my Design/Custom CSS port, but no avail, the video is still presenting me with the dark grey border around my vid block, and is still floating to the top of my mobile screen. I tried playing with the padding-top, and adjusting it to 400, then 800px, but nothing. Perhaps it's the #block number that we've gotten wrong? Also,,, where did you find that #block number..?

Thanks again!

Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Terrific, thanks so much @tuanphan

So, good news @Summit227, your block ID was correct (you're amazing), but it still hasn't solved my problem, I'm afraid:

I still have a grey border around my vid block, and

My landing page video is still floating to the top on mobile view.

Some things I've tried/maybe I should mention – I've set mobile view to be deactivated, so that desktop view/layout is seen on mobile format anyway (client gets what client wants). Also, I've tried adjusting the spacer I've got above the vid block – which solves the mobile view problem, but drags the video too low when viewed on desktop. And mobile still has the grey border, where desktop does not (a problem when mobile view is activated or deactivated).

Any further help is G R E A T L Y appreciated...!

@SRD sorry for the delay!  Can't say I comment much seeing I'm still learning, so don't check SS Answers that frequently.  The Chrome extension @tuanphan provided is a great tool!  It's definitely helped me a few times for tricky identifying. 

Anyway, just looked at your site and it seems you figured it out!  Right?   I checked the mobile view and no longer saw that grey border.  Hopefully using the inspector pointed you in the right direction.