Full-Bleed Video or Correcting Centering of the First Video

Site URL: https://scarlet-grape-g5ln.squarespace.com/

Hi there, 

I was looking for help with making a video full-bleed responsive with the website edge to edge.

I also want it to work for both desktop and mobile.

I have two examples running on my page right now.

There was one where I am running it as a background video using BUT it wasn't centering properly.  Part of it was being cut off by the header and it wasn't centering on the mobile properly either

/*
Section background image 16:9 video
*/

//show on mobile
section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] {

display:block !important;
}

// show on desktop
html.no-touch section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] {

display: block !important;
  top: 0 !important
}

section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] {
  //16:9 spacer
  padding-bottom: 56.25%;
  min-height: 0 !important;
    .section-background  .sqs-video-background iframe {
    //make it the size of parent no matter what automatic JS it would like to do
    border-width: 0;
    position: absolute !important ;
         top: 60%;
        left: 60%;
        margin-right: 0%;
        transform: translate(-50%, -50%) }
  
  // blocks would be here but we won't have any
  .content-wrapper{
    display:none !important;
  }
}
 

I was currently using this (a code of yours that I found in the past) in the CSS for the second version of the video underneath the one that is currently full-bleed

/* Video fullwidth */
[data-section-id="6103292e6ee0aa3483fa6e22"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

Website:

https://scarlet-grape-g5ln.squarespace.com/

P: doormat123

The video is fine here. Did you solve problem?