Align background video to the top?

Site URL: https://best-hair-salon-near-me.squarespace.com/

Hey there

My website = https://best-hair-salon-near-me.squarespace.com/

pw: newwebsite

I loaded a background video to my website and the top seems to get cut off. 

Is it possible to justify the video so it aligns at the top and anything cut off is on the bottom?

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
body.homepage article section:first-child {
    margin-top: 25vh !important;
}}

Thank you @tuanphan !! The video now is not cut off on desktop.

Is there a way to justify the video so it starts with the top on mobile? Right now on mobile it centers and the top and bottoms are cut off.

www.salonposta.com is the website

On 5/14/2022 at 12:50 AM, ImTonyT said:

Thank you @tuanphan !! The video now is not cut off on desktop.

Is there a way to justify the video so it starts with the top on mobile? Right now on mobile it centers and the top and bottoms are cut off.

www.salonposta.com is the website

The code runs on mobile only. If it caused problem on desktop, I think there is something appears. Can you send all code (after you added my code)? I will check easier

On 5/15/2022 at 3:37 AM, tuanphan said:

The code runs on mobile only. If it caused problem on desktop, I think there is something appears. Can you send all code (after you added my code)? I will check easier

The video actually looks great on desktop.

On mobile the problem is the video plays from the center. I'd like the video to align/justify from the top of the video. Right now if you watch the video everyone's head is cut off. https://www.salonposta.com The size of the video is perfect :)

Thanks! 

Here's all my CSS:

//Shrink Your Logo
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 65px;
  }
}
//Avoid cut off of images and video
@media screen and (min-width:992px) {
body.homepage article section:first-child {
    margin-top: 25vh !important;
}}

On 5/17/2022 at 6:06 AM, ImTonyT said:

 

The video actually looks great on desktop.

On mobile the problem is the video plays from the center. I'd like the video to align/justify from the top of the video. Right now if you watch the video everyone's head is cut off. https://www.salonposta.com The size of the video is perfect 🙂

Thanks! 

 

Here's all my CSS:

//Shrink Your Logo
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 65px;
  }
}
//Avoid cut off of images and video
@media screen and (min-width:992px) {
body.homepage article section:first-child {
    margin-top: 25vh !important;
}}

 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="626c97dce8b3f46e85ba96fb"] {
    margin-top: 5vh;
}
}