Adjusting Video Banner in the Bedford Template

Hello!  I am looking for some code that can adjust the video banner on the Home Page so that it fills up the entire page, no matter what screen size you are viewing it from.  I am working in 7.0 in the Bedford template.  I have included a sample website screenshot of how I want it to look and also included a screenshot of the current website I am working on.  I have added blank lines in the Page Settings description field, to get it to a decent height, but I am getting a black border along the top and bottom when I switch screen sizes.  Is there a code that will make it scale accordingly on different screen sizes, mobile included?  My clients want it to look like the sample screenshot (so that when you click on the page, the video banner is the only thing you see before you start scrolling).

Thank you in advance for any guidance!

Hi,

What is page url? We can check easier

Hi @tuanphan!  The page is https://duck-gopher-pebd.squarespace.com/ and the password is SCCS.  They may be going live with it today or tomorrow.  In that case, the url will be sanduskycc.org.

Thank you!

Try adding to Website > Page or Design > Website Tools > Custom CSS

body.homepage .banner-thumbnail-wrapper.has-description {
    height: 100vh !important;
}

Hi @tuanphan.  Thanks for the code!  It seems to be too large now and there is still that black border along the top and bottom.  I also tried removing the description from the page description on the Page Settings menu and that made the video very short.  Same thing when the site is viewed from tablet and mobile.

Use this new code

body.homepage .banner-thumbnail-wrapper.has-description {
    height: calc(~"100vh - 52.67px") !important;
    padding: 0px !important;
}

Thanks @tuanphan!  The size looks great, I just can't seem to get rid of the black box along the top and bottom.  The new code you supplied looked great when the screen was maximized, but when the screen was restored down to a smaller size, the black border appeared.  And it still appears on mobile and tablet.  Is there a code that tells the video to scale according to screen size?  And what about that black border...I can't figure out what that is and how to edit the color in the style editor?

Sorry for the hassle, but I do appreciate your help!

On 9/19/2023 at 8:05 PM, hollykdesign said:

Thanks @tuanphan!  The size looks great, I just can't seem to get rid of the black box along the top and bottom.  The new code you supplied looked great when the screen was maximized, but when the screen was restored down to a smaller size, the black border appeared.  And it still appears on mobile and tablet.  Is there a code that tells the video to scale according to screen size?  And what about that black border...I can't figure out what that is and how to edit the color in the style editor?

Sorry for the hassle, but I do appreciate your help!

Can you send video file & let me know which template do you use? I will test some code on the template

Hi @tuanphan!  Thank you for all of your help!  I am using the Bedford template in 7.0.  The site is now live and the url is sanduskycc.org. I have a code injection in the header for the secondary navigation bar at the top...not sure if this will effect what you are doing. I will supply that code just in case.

<div class="nav nav-secondary-wrapper">
  <nav aria-label="Header Secondary Nav">
    <ul class="nav-secondary">
      <li class="nav-secondary-item">
        <a href="/news">News</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/calendar">Calendar</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/support">Support</a>
      </li>
    </ul>
   </nav>
</div>

The video url is 

19 hours ago, hollykdesign said:

 

Hi @tuanphan!  Thank you for all of your help!  I am using the Bedford template in 7.0.  The site is now live and the url is sanduskycc.org. I have a code injection in the header for the secondary navigation bar at the top...not sure if this will effect what you are doing. I will supply that code just in case.

<div class="nav nav-secondary-wrapper">
  <nav aria-label="Header Secondary Nav">
    <ul class="nav-secondary">
      <li class="nav-secondary-item">
        <a href="/news">News</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/calendar">Calendar</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/support">Support</a>
      </li>
    </ul>
   </nav>
</div>

The video url is 

 

Thank you. Do you have a video file? I want to upload it to test site to test with Code Block?

Thanks @tuanphan!  File can be found here (click original from the dropdown list).

https://vimeo.com/newdeparturefilms/download/862216713/1673fa3653?fbclid=IwAR3Tk7jiSbHAsPMXCg0A8U_EiU-eBU2d251o-8jEmohTGqM1oldFro4F_74

Hi @tuanphan!  I had a question I was hoping you could maybe help me with.  My client has requested that audio be played for this video...is this possible?

Thanks again for all of your help!

You try checking video

https://tuan-brine.squarespace.com/test-banner?noredirect

pass: abc

I use 240p version so it looks a bit blurry

Hi @tuanphan, thank you, the border does not appear there!  Does it matter that it is not the same template I used?  And can the original quality video be used?

Thank you again for your help!

20 hours ago, hollykdesign said:

Hi @tuanphan, thank you, the border does not appear there!  Does it matter that it is not the same template I used?  And can the original quality video be used?

Thank you again for your help!

Here I added video with Code Block

You can add a Code Block > Paste this code

<video autoplay>
  <source src="/s/test-video.mp4" type="video/mp4">
</video>

with /s/test-video.mp4 is video url

suppose your video name is test-video.mp4

you can follow this guide to upload video

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

On 10/17/2023 at 5:46 AM, tuanphan said:

you can follow this guide to upload video

https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Hi @tuanphan thank you for your reply!  I can't upload the file because it is larger than 800MB.  Do you think the original video can be edited somehow on YouTube and that could fix the border issue?  This is turning out to be a real hassle!  Apologies for the never-ending questions!