Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Full-Bleed Video or Correcting Centering of the First Video


Question

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

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...