Jump to content

Video Not formatting correctly

Recommended Posts

Posted

Site URL: https://www.thynkdesignllc.com/home

https://www.thynkdesignllc.com/home

The video on my home page is not formatting correctly. When put into a video block it has white spaces all around the sides of the video. I want the video to be a full bleed style and bleed out to the edges and sections above/below. When this is done with code it does not format correctly cutting off some section of the video. Normally this isn't such a big deal but the logo in the bottom right HAS to be visible as this isn't our footage and that was the terms of using it. The video is a standard 1:1 aspect ratio.

 

How can i format this so the video is full bleed on ALL platforms (Moble, different layouts etc.)

 

Code Used:

section[data-section-id="66c62ce3d6e3d8300725f0e3"] .sqs-block-video {
    .sqs-block-content, .intrinsic, .embed-block-wrapper, .sqs-native-video  {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        padding: 0 !important;
    }
    .video-player {
        padding: 0 !important;
        video {
            object-fit: cover !important;
        }

    }
}

  • Replies 1
  • Views 46
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted

I notice that this issue occurs due to the fact I have the video drug to the side on the webpage. It seems like the free form boxes help keep the shape of the item no matter what the webpage looks like, but when drug to the side it does not and formats the video to how big the webpage is if that makes sense. Is there a way to have the video drug to the edge( I like the half page full bleed look) and have it format correctly on every browser/screen size?  

 

The code above just removes the white padding around the edges.

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.