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