Video fit/cover plugin for Squarespace

Makes videos fully cover the block, overriding Squarespace’s default video ratio.

SquareSpace 7.1

• Requires Business plan or higher

Free

Get code

Why use

Code

This code needs to be added to Custom CSS


/* Video Fit Plugin by opsquare.co */

:root {
    --op-video-stretch-position: center center;
}

OpVideoFitBlock() {
    .native-video-player {
        padding-top: 0 !important;
    }

    .sqs-block-content,
    .intrinsic,
    .embed-block-wrapper,
    .sqs-native-video {
        height: 100% !important;
    }

    .embed-block-wrapper {
        padding-bottom: 0 !important;
    }

    .plyr video {
        object-fit: cover !important;
        object-position: var(--op-video-stretch-position);
    }

    .plyr__poster {
        background-position: var(--op-video-stretch-position);
        background-size: cover;
    }
}

// Usage:
// .fe-block-xyz {
//    OpVideoFitBlock();
// }

How to install

Add the code to Custom CSS
Add OpVideoFitBlock(); to any section ID or block class styles

ℹ️ OpVideoFitBlock(); something called mixin in LESS (which Squarespace is using it’s editor).
Instead of pasting the full video-fit CSS every time, you can add OpVideoFitBlock(); inside any section ID or block class styles, and it will automatically insert all the required code for that block.

All pages



body {
 OpVideoFitBlock();
}

Section

Will fit all videos in the section



.section-ID {
  OpVideoFitBlock();
}

Block

Will fit all videos in the section



.fe-block {
   @include videoFitBlock();
}