KS – Styles for the custom preview image

ks-video-image-styles.scss

.video-container__image {
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0, 0.1, 0.3, 1);

    // Add play icon
    &::after {
        background-image: url('/images/icon_play_big.svg');
        background-position: center;
        // Play icon in large containers should be larger than in small ones
        background-size: calc(45px + 5%);
        background-repeat: no-repeat;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10;
    }

    & > img {
        height: inherit;
        left: inherit;
        object-fit: cover;
        position: inherit;
        top: inherit;
        width: inherit;
    }

    &--hidden {
        opacity: 0;

        & * {
            pointer-events: none !important;
        }
    }
}